/* Mise en page de Goatch (fichier séparé : la CSP interdit les <style> en ligne).
   Les couleurs, la police et les retouches de la marque ne sont PAS ici : elles viennent de goatch.css, la charte du
   couloir Produit (produit/identite/charte/goatch.css), servie telle quelle à /goatch.css et chargée APRÈS ce
   fichier (page.html, connexion.html). Ses blocs :root définissent, nom pour nom, les variables utilisées ci-dessous
   (--fond, --carte, --texte, --doux, --trait, --accent…) : une seule apparence, sombre (decision.md G). */
* { box-sizing: border-box; }
/* Aucun fond plein sur body (ni sur html) : le fond est le halo de goatch.css, posé sur <html>, et le grain est
   body::after (charte, « La finition ») ; un fond ici masquerait le halo et le laurier en filigrane. */
body { margin: 0; color: var(--texte); font: 15px/1.45 var(--police-texte); }
/* Le laurier en filigrane (goatch.css, body::before) déborde de 70 px à droite : sans ce rognage, le téléphone élargit
   la page (445 px au lieu de 375, vu au navigateur intégré) et tout l'écran se décale. body le rogne (position
   relative : le filigrane se place sur body) ; html porte le débordement pour que celui de body ne remonte pas. */
html { overflow-x: hidden; }
body { position: relative; overflow-x: clip; }
/* Les dégradés d'or des graphiques (charte, « La finition ») : le SVG « defs-or » en tête de <body>, hors du flux. */
.defs-or { position: absolute; width: 0; height: 0; overflow: hidden; }
header { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 28px 4px; flex-wrap: wrap; }
/* le logo (26 px de haut) garde au moins la moitié de sa hauteur d’air autour (charte) : 13 px = padding de l’en-tête, de ce bloc et écarts */
header .marque { margin: 0; padding: 0 13px 3px; line-height: 0; }
.athlete { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--doux); }
.athlete select { flex: 1; min-width: 0; font-weight: 600; color: var(--texte); }
.athlete [hidden] { display: none; }   /* sélecteur masqué tant qu'aucun profil n'existe */
@media (max-width: 600px) { .ligne3 { grid-template-columns: 1fr 1fr; } }
.vue { display: grid; grid-template-columns: 380px 1fr; gap: 20px; padding: 14px 28px 28px; align-items: start; }
.vue[hidden] { display: none; }
.vue > *, .ligne > *, .ligne3 > * { min-width: 0; }
input, select { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .vue { grid-template-columns: 1fr; padding: 12px 16px; } header { padding: 12px 16px 2px; } }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre); }
.panneau { padding: 18px; }
/* formulaire collé seulement à côté du résultat (deux colonnes) : en une colonne, il passait par-dessus la séance
   générée (Recette G7) */
@media (min-width: 901px) { form.panneau { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; } }
.carte h2.titre { font-size: var(--taille-titre-carte); margin: 0 0 14px; }   /* Marcellus : jamais sous --taille-titre-min (16 px) */
.champ { margin-bottom: 14px; }
.champ > label, .titre-champ { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.aide { color: var(--doux); font-weight: 400; }
select, input[type=number], input[type=text], input[type=email], input[type=date] { width: 100%; padding: 8px 10px; border: 1px solid var(--trait);
  border-radius: 8px; background: var(--fond); color: var(--texte); font: inherit; }
.ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ligne3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces label { cursor: pointer; }
.puces input { position: absolute; opacity: 0; pointer-events: none; }
.puces span { display: inline-block; padding: 5px 10px; border: 1px solid var(--trait); border-radius: 999px;
  font-size: 13px; background: var(--fond); user-select: none; }
.puces input:checked + span { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-fonce); font-weight: 600; }
.puces input:focus-visible + span { outline: 2px solid var(--bleu); }
.rpe { display: flex; align-items: center; gap: 12px; }
.rpe input { flex: 1; accent-color: var(--accent); }
.rpe output { min-width: 34px; text-align: center; font-weight: 700; font-size: 18px; color: var(--accent-fonce); }
.rpe-mot { color: var(--doux); font-size: 13px; margin-top: 2px; }
.rpe-bornes { display: flex; justify-content: space-between; color: var(--doux); font-size: 13px; margin: -2px 0 6px; }
/* lot n° 38, point 1 : le curseur du terrain d'une course de trail (PROVISOIRE, Marque) */
.terrain-curseur { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.terrain-curseur input { flex: 1; accent-color: var(--accent); }
.terrain-bouts { display: flex; justify-content: space-between; font-size: 12px; color: var(--doux); margin-top: 2px; }
.terrain-nom { font-weight: 700; margin: 2px 0 0; }
.temps-estime { color: var(--doux); font-size: 14px; margin: 2px 0 8px; }
details.plus { border-top: 1px solid var(--trait); padding-top: 10px; margin: 6px 0 14px; }
details.plus summary { cursor: pointer; color: var(--doux); font-size: 13px; font-weight: 600; }
details.plus[open] summary { margin-bottom: 12px; }
.actif-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  background: var(--accent-pale); color: var(--accent-fonce); }
.actif-badge[hidden] { display: none; }
.duree-imposee { padding: 8px 10px; border: 1px dashed var(--trait); border-radius: 8px; color: var(--doux); font-size: 13px; }
.note-seance { background: var(--violet-pale); color: var(--texte); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.case { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 6px 0; }
.case input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
button.principal { width: 100%; border: 0; background: var(--accent); color: var(--sur-accent); padding: 12px; border-radius: 10px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
button.principal:hover { background: var(--accent-fonce); }
button.principal:disabled { opacity: .6; cursor: wait; }
button.second { border: 1px solid var(--trait); background: var(--carte); color: var(--texte); padding: 7px 12px;
  border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
button.second:hover { border-color: var(--doux); }
button.danger { color: var(--alerte); }
.bandeau { background: var(--bleu-pale); color: var(--texte); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.bandeau b { color: var(--bleu); }
.resultat { padding: 22px 26px; min-height: 300px; }
.vide { color: var(--doux); text-align: center; padding: 80px 20px; }
.vide b { display: block; color: var(--texte); font-size: 17px; margin-bottom: 6px; }
.tete { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.tete h2 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.01em; flex: 1; min-width: 240px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chiffre { background: var(--fond); border: 1px solid var(--trait); border-radius: 10px; padding: 6px 12px; }
.chiffre small { display: block; color: var(--doux); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.chiffre b { font-size: 16px; }
.info { color: var(--doux); font-size: 14px; margin: 2px 0; }
.section { margin-top: 18px; }
.section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--intertitre);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--trait); }
.el { padding: 7px 0 7px 2px; }
.el + .el { border-top: 1px dashed var(--trait); }
.el .nom { font-weight: 600; }
.el .det { color: var(--doux); font-size: 13.5px; padding-left: 26px; }
/* .attention : un filet orangé, une phrase (goatch.css, « Pages allégées ») ; ici l'espacement seulement */
.attention { margin-top: 14px; }
.attention h3 { color: var(--alerte); border: 0; padding: 0; margin: 0 0 4px; }
details.repli { margin-top: 14px; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 16px; }
details.repli summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.repli .el { font-size: 14px; }
.refus { background: var(--alerte-pale); color: var(--alerte); border-radius: 10px; padding: 14px 16px; }
.ok { background: var(--vert-pale); color: var(--vert); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.attente { color: var(--doux); text-align: center; padding: 80px 20px; }
/* plan */
.phases { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin: 6px 0 4px; }
.phases div { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600;
  color: var(--nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
/* lot n° 37, point 5 : le nom dans un bloc, pour que les points de suspension jouent au lieu d'un mot coupé */
.phases div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.legende { display: flex; flex-wrap: wrap; gap: 12px; color: var(--doux); font-size: 12px; margin: 6px 0 14px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
svg.charge { width: 100%; height: 130px; display: block; }
.semaine { border: 1px solid var(--trait); border-radius: 12px; margin-top: 10px; overflow: hidden; }
.semaine > summary { list-style: none; cursor: pointer; padding: 10px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.semaine > summary::-webkit-details-marker { display: none; }
.semaine > summary .num { font-weight: 700; min-width: 92px; }
.semaine > summary .meta { color: var(--doux); font-size: 13px; flex: 1; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.b-charge { background: var(--accent-pale); color: var(--accent-fonce); }
.b-allegee { background: var(--vert-pale); color: var(--vert); }
.b-test { background: var(--violet-pale); color: var(--violet); }
.b-affutage { background: var(--bleu-pale); color: var(--bleu); }
.b-course, .b-course_objectif { background: var(--texte); color: var(--carte); }
.b-transition { background: var(--trait); color: var(--doux); }
.seances { border-top: 1px solid var(--trait); }
.sea { display: grid; grid-template-columns: 92px 86px 1fr auto; gap: 10px; padding: 8px 16px; align-items: center; cursor: pointer; font-size: 14px; }
.sea:hover { background: var(--fond); }
.sea + .sea, .sea-detail + .sea { border-top: 1px dashed var(--trait); }
.sea .jour { color: var(--doux); font-size: 13px; }
.sea .titre { font-weight: 600; }
.sea .titre small { display: block; font-weight: 400; color: var(--doux); font-size: 12.5px; }
.sea .droite { color: var(--doux); font-size: 13px; text-align: right; white-space: nowrap; }
.sea.cle .titre::before { content: "★ "; color: var(--accent); }
.d-course, .d-course_objectif { color: var(--accent-fonce); } .d-renfo { color: var(--bleu); } .d-test { color: var(--violet); } .d-repos { color: var(--doux); }
.sea-detail { padding: 6px 20px 16px; background: var(--fond); }
dialog.feuille-seance .sea-detail { padding: 0; background: none; }      /* lot n° 15 : la feuille est déjà le cadre */
.sea-detail .section h3 { font-size: 12px; }
/* téléphone : la durée reste (Recette R5) ; seule l'étiquette de discipline part ; le titre a toute la largeur, sous le
   jour et la durée (Recette 4fec94fd G3 : plus de colonne de 130 px sur 4 ou 5 lignes) */
@media (max-width: 600px) {
  .sea { grid-template-columns: 1fr auto; grid-template-areas: "jour droite" "titre titre"; row-gap: 2px; }
  .sea .jour { grid-area: jour; } .sea .titre { grid-area: titre; } .sea .droite { grid-area: droite; }
  .sea .disc { display: none; }
}
/* profil */
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--intertitre); font-weight: 700; margin-bottom: 10px; }
.jours { gap: 4px; }
.colonne-droite { display: grid; gap: 20px; }
table.histo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.histo th { text-align: left; color: var(--doux); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--trait); }
table.zones { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
table.zones td { padding: 5px 6px; border-bottom: 1px dashed var(--trait); }
table.zones td:first-child { font-weight: 700; width: 40px; }
table.zones td.bpm { font-weight: 700; color: var(--texte); white-space: nowrap; }
table.histo td { padding: 7px 8px; border-bottom: 1px dashed var(--trait); vertical-align: top; }
.paires td { padding: 3px 4px 3px 0; }
.paires input { padding: 6px 8px; }
.res-test { margin-top: 14px; }
.avant-apres { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.avant-apres .chiffre b { color: var(--vert); }
.liste-plans .item { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--trait); font-size: 13.5px; }
.liste-plans .item span { flex: 1; }
svg.courbe { width: 100%; height: 150px; display: block; }
@media print {
  header, form, .actions, #bloc-test, #plans-enregistres, .barre-onglets, .entete-vue, .coach-bouton { display: none !important; }
  .vue { display: block; padding: 0; }
  .carte { border: 0; box-shadow: none; }
  details.repli { display: none; }
  details.repli.carte-semaine { display: block; }   /* lot n° 49 : « Cette semaine » repliée s'imprime */
  .semaine { break-inside: avoid; }
}

/* ---------- v4 : téléphone d'abord, connexion, onglets de modules ---------- */
input[type=password] { width: 100%; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px;
  background: var(--fond); color: var(--texte); font: inherit; }
.actions-profil { margin-top: 10px; justify-content: space-between; }
.vue-module { grid-template-columns: 1fr; }
.module-panne { margin: 0; }
/* masqué à l'œil, lisible par les gestionnaires de mots de passe ; aucune largeur (Recette F39 : la page de connexion
   faisait 436 px pour un écran de 390, le champ gardait la largeur et les marges des champs de la charte) */
.cache-visuel { position: absolute !important; left: 0; top: 0; width: 1px !important; min-width: 0 !important;
  height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.source-zones { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--bleu-pale); color: var(--bleu); margin-left: 4px; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
@media (max-width: 600px) {
  /* sous 16 px, iOS agrandit la page au moindre champ touché */
  select, input[type=number], input[type=text], input[type=email], input[type=date], input[type=password] { font-size: 16px; padding: 10px 12px; }
  /* île dynamique : iOS floute le bord haut sous la zone sûre ; le logo descend d'environ 15 px (rien sans encoche) */
  header { gap: 10px; padding-top: calc(12px + env(safe-area-inset-top) / 4); }
  button.second { min-height: 40px; }
  .puces span { padding: 8px 12px; font-size: 14px; }
  .case input { width: 22px; height: 22px; }
  .vue { padding: 10px 12px 24px; gap: 14px; }
  .panneau { padding: 16px; }                     /* 16 px du bord : jetons.json espacements_px (Recette T6) */
  form.panneau { position: static; }
  .resultat { padding: 16px; min-height: 0; }
  .vide { padding: 32px 12px; }
  .tete h2 { min-width: 0; font-size: 19px; }
  .ligne3 { grid-template-columns: 1fr 1fr; }
  table.zones td.repere { display: none; }
  .tete .actions { margin-bottom: 12px; }
}

/* ---------- refus sous le bouton, défilement, retour à la dureté conseillée (decision.md K12) ---------- */
.message-form { margin-top: 12px; }
.message-form[hidden] { display: none; }
.resultat, .message-form { scroll-margin-top: 12px; }
button.lien { border: 0; background: none; padding: 0 2px; font: inherit; font-size: 13px; color: var(--bleu);
  text-decoration: underline; cursor: pointer; }

/* ---------- page de connexion ---------- */
.connexion { max-width: 380px; margin: 10vh auto 0; padding: 0 16px; }
.connexion form { padding: 24px; }
.connexion div.carte { padding: 24px; }   /* lot n° 44 : lien d’invitation périmé ou déjà servi */
.connexion a.lien { display: inline-block; margin-top: 12px; color: var(--bleu); font-size: 14px; font-weight: 600; min-height: 44px; line-height: 44px; }
.connexion h1.marque { margin: 0 0 13px; line-height: 0; }
.connexion .info { margin-bottom: 16px; }
.connexion .refus { margin-bottom: 14px; }

/* ---------- retours de la Recette (decision.md R) ---------- */
.alerte-douce { color: var(--alerte); }
.alerte-douce[hidden] { display: none; }
.phases + .legende { margin-top: 2px; }

/* ---------- enregistrer le plan : un bouton visible (decision.md GO19) ---------- */
.tete .a-enregistrer { flex: 1 1 100%; margin: 0 0 12px; }
.a-enregistrer .info { margin-top: 6px; font-size: 13px; }
/* lot n° 27 bis, point 1 : « Annuler » à côté d'« Enregistrer le plan » (l'or plein reste seul) */
.a-enregistrer .actions-plan { display: flex; gap: 12px; align-items: stretch; }
.a-enregistrer .actions-plan .principal { flex: 1 1 auto; }
.a-enregistrer .actions-plan .second { flex: 0 0 auto; width: auto; padding-left: 18px; padding-right: 18px; }
#p-annuler { display: block; margin: 8px auto 0; }
.barre-plan button.lien { flex: 0 0 auto; }
#p-construire.second { width: 100%; padding: 11px; font-size: 15px; }
.barre-plan { display: none; }
@media (max-width: 900px) {
  /* collée au-dessus de la barre d'onglets (decision.md GO21) ; la vue garde la place de la barre : rien n'est masqué */
  .barre-plan:not([hidden]) { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; z-index: 19;
    bottom: calc(var(--hauteur-onglets) + 9px + env(safe-area-inset-bottom));   /* 4 + 52 + 4 de la barre, + son filet */
    padding: 10px 16px; background: var(--carte); border-top: 1px solid var(--trait);
    box-shadow: var(--ombre); }
  .barre-plan span { flex: 1; color: var(--doux); font-size: 13px; }
  .barre-plan button.principal { width: auto; padding: 10px 18px; font-size: 15px; }
  main.vue.avec-barre { padding-bottom: 84px; }
  /* le bouton du coach (goatch.css, .coach-bouton) remonte au-dessus de la barre du plan quand elle est là */
  body.barre-plan-visible .coach-bouton { bottom: calc(var(--hauteur-onglets) + 8px + 62px + var(--espace-4) + env(safe-area-inset-bottom)); }
}
.avis { position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  bottom: calc(var(--hauteur-onglets) + 8px + 16px + 56px + 12px + env(safe-area-inset-bottom));   /* au-dessus des onglets et du coach */
  width: min(480px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px;
  background: var(--carte); color: var(--texte); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); font-size: 14px; }
.avis[hidden] { display: none; }
.avis span { flex: 1; }
.avis .avis-fermer { font-size: 18px; text-decoration: none; color: var(--doux); padding: 0 4px; }
@media print { .barre-plan, .avis, .a-enregistrer { display: none !important; } }

/* --- champs date iOS --- */
/* Safari iOS donne aux input[type=date] une largeur intrinsèque (le sélecteur natif) : dans une colonne de grille,
   le champ débordait à droite et chevauchait son voisin (Plan : Date de la course, Début du plan ; Profil : Date du
   test). Retour de Thomas sur iPhone, 02/10 (decision.md R4-6). */
input[type=date] { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  -webkit-appearance: none; appearance: none; min-height: calc(1.25em + 18px); line-height: 1.25; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.25em; }
input[type=date]::-webkit-datetime-edit { padding: 0; }
.champ:has(> input[type=date]) { min-width: 0; }
@media (max-width: 600px) { input[type=date] { min-height: calc(1.25em + 22px); } }
/* --- fin champs date iOS --- */

/* ---------- navigation : barre d'onglets, accueil à tuiles, Progrès, Profil (charte, accueil/maquette.html ; decision.md GO21) ----------
   Tout ce qui est propre à Goatch (barre, tuiles, pastilles, cartes de mesure, jauge, anneau, niveaux, segments) vient de
   goatch.css ; ici, la mise en page seulement. Aucun style en ligne dans les nouveaux écrans : des classes. */
.vue-accueil { display: block; padding: 0 0 16px; }
.vue-accueil .module { max-width: 720px; margin: 0 auto; }
.vue-accueil .salut { margin-top: var(--espace-4); }
.tuile .tuile-lien { position: absolute; inset: 0; }
.resume-semaine { margin-top: 0; }
.ligne-chiron { margin: var(--espace-4) var(--espace-5) 0; font-size: var(--taille-petit); color: var(--doux); }
.entete-vue { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }
.entete-vue .titre-page { flex: 1; }
.titre-page { font-family: var(--police-titre); font-weight: 400; font-size: var(--taille-titre-ecran); margin: var(--espace-2) 0; }
button.retour { flex-basis: 100%; align-self: flex-start; border: 0; background: none; padding: 4px 0; margin: 0; font: inherit;
  font-size: var(--taille-petit); font-weight: 600; color: var(--doux); cursor: pointer; text-align: left; }
button.retour::before { content: "‹ "; }
.raccourcis { display: flex; gap: var(--espace-2); flex-wrap: wrap; }
.espace-avant { margin-top: 10px; }
#plans-enregistres { margin-top: 16px; }
#f-plan, .vue-profil form.panneau { position: static; max-height: none; overflow: visible; }
details.repli.serre { margin: 0 0 14px; }
.tete h2.titre { flex: 1; }
/* Profil et Progrès : une colonne, comme sur le téléphone */
.vue-profil, .vue-progres { grid-template-columns: minmax(0, 720px); justify-content: center; gap: var(--espace-3); }
.ident { display: flex; align-items: center; gap: 12px; padding: var(--espace-4); }
.avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--relief); border: 1px solid var(--trait);
  display: flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-size: 18px; color: var(--doux); }
.ident h2 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: var(--taille-titre-carte); }
.ident-texte { min-width: 0; }
.ident-texte span { display: block; color: var(--doux); font-size: var(--taille-legende); }
.carte.action { padding: var(--espace-4); }
/* « Montre et capteurs » et « Vos données » : les marges de la carte « Sports » (Recette P3, règle des 16 px de Produit) */
.carte.carte-reglages { padding: 0 var(--espace-4); }
.action h3 { margin: 0 0 4px; font-size: var(--taille-petit); text-transform: uppercase; letter-spacing: .05em; color: var(--intertitre); }
.action p { margin: 0 0 12px; color: var(--doux); font-size: var(--taille-petit); }
.action button.second { min-height: 40px; }
.action > button.second { width: 100%; }
.segments [role="tab"] { min-height: 40px; }
[role="tabpanel"][hidden], form[hidden] { display: none; }
/* lot n° 49, point 5 (écran 18 de Marque) : le Profil en tuiles, l'une sous l'autre ; chaque tuile, son titre à icône or,
   ses lignes (en gras, ou un libellé doux suivi de sa valeur en gras), son lien or ; en vue tuiles, le formulaire n'est plus
   une carte (il ne garde que la feuille des réglages) */
.profil-tuiles { display: flex; flex-direction: column; gap: 12px; }
.profil-tuiles[hidden], [data-volet][hidden], .carte-reglages[hidden] { display: none; }
.profil-tuiles > .tuile { flex: 0 0 auto; width: 100%; max-width: none; max-height: none; aspect-ratio: auto; margin: 0;
  box-sizing: border-box; justify-content: flex-start; padding: 16px; background: var(--carte); }
.profil-tuiles > .tuile::before { display: none; }
.profil-tuiles .acc-lab { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--doux); }
.profil-tuiles .acc-lab svg.acc-ic { width: 16px; height: 16px; flex: none; color: var(--or); }
.profil-tuiles p.pt-l { margin: 6px 0 0; font-size: 15px; color: var(--texte); overflow-wrap: anywhere; }
.profil-tuiles .pt-lib { color: var(--doux); }
.profil-tuiles .acc-ma-semaine { display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  margin: 10px 0 -8px; border-top: 1px solid var(--nuit-trait); color: var(--or); font-size: 15px; text-decoration: none; }
.profil-tuiles .acc-ma-semaine svg { width: 18px; height: 18px; flex: none; }
#f-profil.pf-replie { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.pf-bas { display: flex; justify-content: center; }
/* une sous-vue (« ‹ Profil ») ne montre que sa liste */
.vue-profil.pf-sous .ident, .vue-profil.pf-sous .athlete, .vue-profil.pf-sous #pf-sl-montre, .vue-profil.pf-sous .pf-bas { display: none; }
.pf-bas:not(:has(button:not([hidden]))) { display: none; }
/* Progrès : la grille de cartes (goatch.css), le graphique de charge et les talents */
.grille .mesure .actions { margin-top: var(--espace-1); }
.mesure button.second { width: 100%; }
svg.histo { width: 100%; height: 86px; display: block; }
.histo rect.charge { fill: var(--g-charge); } .histo rect.allegee { fill: var(--g-allegee); } .histo rect.test { fill: var(--g-test); }
.histo rect.affutage { fill: var(--g-affutage); } .histo rect.transition { fill: var(--g-transition); }
.histo rect.course, .histo rect.course_objectif { fill: var(--texte); }
.histo rect.prevu { fill: none; stroke: var(--doux); stroke-dasharray: 3 2; }
.histo text { fill: var(--doux); font-size: 10px; text-anchor: middle; font-family: var(--police-texte); }
.ligne-niveau span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* la charge expliquée, repliée (« durée × effort ressenti ») */
details.explication { margin: -8px 0 14px; font-size: 13px; color: var(--doux); }
details.explication summary { cursor: pointer; }
.pastille-serie { width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.paires th { text-align: left; }
.refus-page { margin: 16px; }
.tete.tete-detail { margin-top: 10px; }
.tete-detail h3 { margin: 0 0 8px; flex: 1; }
.notes-semaine { padding: 8px 14px; }
/* ---------- densité : une ligne par bloc, le reste derrière le « i » (charte, « Le bouton « i » » ; decision.md GO22) ---------- */
.el.el-ligne { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.el-ligne .nom { flex: 1; min-width: 0; }
.tete > button.info { margin-top: -6px; }
.chiffre small { display: flex; align-items: center; gap: 2px; }
.chiffre small button.info { margin: -14px -12px -14px -6px; }
.attention p { margin: 2px 0; }
.semaine > summary button.info { margin: -10px 0; }      /* 16 px du bord droit, comme le texte (Recette T6, 6e596ac6) */
.alternatives { margin-top: 8px; }
.ta-liens button.info, .mesure .etiquette button.info { margin: -12px -12px -12px 0; }
#p-construire { margin-top: 10px; }
/* ---------- pages allégées (charte : exemples/*.html ; decision.md GO23) ---------- */
.resultat dl.chiffres, .resultat .blocs, .resultat .essentiel { margin-top: 12px; }
.essentiel { color: var(--doux); margin: 0 0 4px; }
.blocs .duree button.info { margin: -12px -12px -12px 0; }
.rangee { margin-top: 16px; align-items: flex-start; }
.rangee > button.second { min-height: 44px; }
/* lot n° 15, point 2 (charte exemples/apple.html) : le renfo en groupes, un exercice par ligne, la dose à droite ; la
   ligne entière se touche (sa fiche) et son fond s'allume (charte, « Le mouvement », 2) */
h3.groupe { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 2px 6px; }
h3.groupe small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--doux); }
.lignes-a { list-style: none; margin: 0; padding: 0; background: var(--abysse); border: 1px solid var(--trait);
  border-radius: 14px; overflow: hidden; }
.lignes-a li { margin: 0; border-bottom: 1px solid var(--trait); }
.lignes-a li:last-child { border-bottom: 0; }
.lignes-a .ligne-ex { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px 14px;
  border: 0; border-radius: 0; background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--duree-relache, 220ms) var(--courbe-douce, ease); }
.lignes-a .ligne-ex:active:not(:disabled) { transform: none; background-color: var(--relief); transition-duration: 0ms; }
.et-nom { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.et-val { text-align: right; font-size: 15px; font-weight: 500; white-space: nowrap; }
.et-val small { display: block; font-size: 12px; font-weight: 400; color: var(--doux); }
/* lot n° 22, point 8 : les paliers des séries d'approche, un par ligne */
.et-val .et-palier { display: block; }
.chev { color: var(--doux); font-size: 18px; }
/* lot n° 15, point 1 (Apple feeling ; charte exemples/apple.html) : une ligne sous le titre, des actions discrètes */
.une-ligne { color: var(--doux); font-size: 15px; margin: 2px 0 8px; }
.actions-discretes { justify-content: center; gap: 22px; margin-top: 14px; }
.actions-discretes button.lien { color: var(--doux); font-size: 14px; font-weight: 600; min-height: 44px; padding: 6px 4px;
  text-decoration: none; }
/* lot n° 15, point 3 (Apple feeling, le plan) : les remarques en une ligne, la séance en feuille avec sa croix (lot n° 42 :
   le « + » du Plan est retiré) */
button.remarque { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  margin: 8px 0; padding: 10px 2px 0; border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: none;
  color: var(--texte); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
button.remarque > span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--alerte); margin-right: 8px; vertical-align: 1px; }
button.remarque:active:not(:disabled) { transform: none; }
ul.remarques-plan li { margin-bottom: 10px; }
.feuille-tete { display: flex; justify-content: space-between; align-items: center; margin: -6px -4px 0; }
dialog.feuille button.op-x { width: 44px; flex: none; height: 44px; min-height: 0; margin: 0; border-radius: 50%; border: 0; color: var(--doux);
  font-size: 15px; padding: 0; background: radial-gradient(circle, var(--relief) 15px, transparent 15.5px); }   /* 30 px, touché sur 44 */
dialog.feuille .h-feuille { font-family: var(--police-titre); font-weight: 400; font-size: 24px; margin: 4px 0 var(--espace-2); flex: 1; }
/* lot n° 15, point 4 : le « i » — une phrase en grand, puis une liste groupée dont chaque ligne s'ouvre */
dialog.feuille .sous-titre { font-size: 13px; margin: -2px 0 var(--espace-3); }
dialog.feuille .phrase-pourquoi { font-family: var(--police-titre); font-size: 21px; line-height: 1.35; color: var(--texte);
  margin: 0 0 var(--espace-4); }
/* lot n° 37, point 5 : « Goatch s'appuie sur un long travail de recherches. » à distance de la liste, pas collée */
dialog.feuille .aide.recherches { margin: var(--espace-4) 0 0; }
dialog.feuille ul.groupe-ios { list-style: none; padding: 0; margin: var(--espace-3) 0 0; background: var(--relief); border-radius: 14px;
  overflow: hidden; }
dialog.feuille .groupe-ios > li { margin: 0; padding: 0; border-bottom: 1px solid var(--trait); }
dialog.feuille .groupe-ios > li:last-child { border-bottom: 0; }
.groupe-ios summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; list-style: none;
  cursor: pointer; color: var(--texte); transition: background-color var(--duree-relache, 220ms) var(--courbe-douce, ease); }
.groupe-ios summary::-webkit-details-marker { display: none; }
.groupe-ios summary:active { background-color: var(--abysse); transition-duration: 0ms; }
.groupe-ios .g-nom { flex: 1; }
.groupe-ios .g-val { color: var(--doux); }
.groupe-ios .chev { transition: transform var(--duree-relache, 220ms) var(--courbe-douce, ease); }
.groupe-ios details[open] .chev { transform: rotate(90deg); }
.groupe-ios .g-corps { padding: 0 14px 10px; }
.groupe-ios .g-corps ul.sources { padding-left: 1.1em; }
dialog.feuille-seance .tete-detail { display: flex; align-items: center; gap: 8px; }
dialog.feuille-seance .une-ligne { margin: 2px 0 12px; }
/* lot n° 15, point 6 : les squelettes d'attente (les couleurs, le délai de 300 ms et la pulsation : goatch.css) */
.squelette { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sq-tuile { border: 1px solid var(--trait); border-radius: 22px; padding: 18px; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.sq-trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sq-cap, .sq-et { display: flex; justify-content: space-between; gap: 12px; }
.sq-et { padding: 12px 0; border-bottom: 1px solid var(--trait); }
.sq-bloc { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sq-jour { display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.sq-col { display: flex; flex-direction: column; gap: 6px; }
.squelette i.sq { display: block; }
.squelette i.sq-l30 { width: 30%; } .squelette i.sq-l34 { width: 34%; } .squelette i.sq-l36 { width: 36%; }
.squelette i.sq-l38 { width: 38%; } .squelette i.sq-l40 { width: 40%; } .squelette i.sq-l52 { width: 52%; }
.squelette i.sq-l64 { width: 64%; } .squelette i.sq-l70 { width: 70%; } .squelette i.sq-l100 { width: 100%; }
.squelette i.sq-h6 { height: 6px; } .squelette i.sq-h14 { height: 14px; } .squelette i.sq-h18 { height: 18px; }
.squelette i.sq-h34 { height: 34px; } .squelette i.sq-h44 { height: 44px; } .squelette i.sq-h48 { height: 48px; }
.squelette i.sq-h52 { height: 52px; } .squelette i.sq-h54 { height: 54px; }
.squelette i.sq-r52 { width: 52px; height: 52px; margin: auto; } .squelette i.sq-date { width: 36px; height: 40px; }
details.plus-actions > summary { list-style: none; cursor: pointer; text-align: center; min-height: 44px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--trait); background: var(--carte); border-radius: 8px; font-weight: 600; font-size: 13px; }
details.plus-actions > summary::-webkit-details-marker { display: none; }
details.plus-actions[open] > summary { border-color: var(--doux); }
details.plus-actions .liste-actions { margin-top: 6px; }
/* plan : consultation ou création (decision.md GO23) */
.vue-plan { grid-template-columns: minmax(0, 760px); justify-content: center; }
.vue-plan .resultat { min-height: 0; }
.consultation-plan { display: grid; gap: var(--espace-3); }
.consultation-plan[hidden], #p-creation[hidden] { display: none; }
#p-nouveau { width: 100%; min-height: 44px; }
#f-plan .etapes { margin-bottom: var(--espace-4); }
#f-plan fieldset.etape[hidden] { display: none; }
#p-continuer, #p-precedent { width: 100%; margin-top: 10px; }
#p-ensuite { text-align: center; margin-top: 10px; font-size: 13px; }
.carte-semaine { margin-top: 16px; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.tete-semaine { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 6px; }
.tete-semaine h3 { margin: 0; font-family: var(--police-titre); font-weight: 400; font-size: var(--taille-titre-carte); }
.tete-semaine span { color: var(--doux); font-size: 13px; }
.resultat progress.jauge { margin: 6px 0 4px; }
details.semaines-suivantes { margin-top: 14px; }
/* lot n° 49, point 4 (écrans 17 et 17d) : avec ses tuiles, la zone du Plan n'est plus une carte (les tuiles le sont) ;
   « Mon plan » : « Cette semaine » repliée, son étiquette et sa ligne dans le titre du repli */
#r-plan.en-tuiles { background: none; border: 0; box-shadow: none; padding: 0; }
.plan-tuiles[hidden], .plan-detail[hidden] { display: none; }
details.repli.carte-semaine { padding: 0; }
details.repli.carte-semaine > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 16px; }
details.repli.carte-semaine > summary .meta { flex-basis: 100%; color: var(--doux); font-weight: 400; }
details.repli.carte-semaine[open] > summary { border-bottom: 1px solid var(--trait); }
.raccourcis[hidden] { display: none; }

/* --- assemblage du 03/10 (decision.md, section K) --- */
/* le bouton du coach IA cohabite avec la barre d'onglets : le bas de chaque écran reste lisible au-dessus de lui */
body.avec-onglets.avec-coach { padding-bottom: calc(var(--hauteur-onglets) + 8px + 16px + env(safe-area-inset-bottom)); }   /* lot n° 12, point 28 : le coach est dans la rangée de la barre */
/* Profil : les champs d'un réglage dans sa feuille ; la légende répète le titre de la feuille */
#pf-feuille legend { display: none; }
#pf-feuille fieldset { border: 0; padding: 0; margin: 0 0 12px; }
#pf-feuille button.principal { margin-top: 8px; }
.ident-texte .ident-reperes { margin: 4px 0 0; color: var(--doux); font-size: 14px; }
#pf-test, [data-vue="progres"] > button[data-aller="tests"] { width: 100%; margin: 12px 0; }
/* la ligne d'une semaine du plan, et la version d'un plan modifié par le coach */
.ligne-semaine { margin: 0 0 6px; color: var(--doux); font-size: 14px; }
/* T6 (Recette) : 16 px de marge intérieure dans la carte de la semaine ; sur téléphone, le résumé d'une semaine passe
   sous son titre, sur toute la largeur (il s'écrasait en colonne étroite) */
.carte-semaine .ligne-semaine { padding: 0 16px; }
/* fiche n° 35 (lot n° 37, point 3 f) : sous « 10 jours », les jours passés de la semaine, sous un intertitre discret */
.carte-semaine .plus-tot { margin: 10px 16px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
/* lot n° 12, point 9 : l'encart d'une semaine où le coureur a retiré ses jours, à 16 px du bord comme le texte de la
   carte ; « Remettre des jours » sur sa propre ligne */
.encart-pause { padding: 0 16px 10px; margin: 0; }
.encart-pause button.lien { display: block; margin-top: 4px; padding: 0; text-align: left; }
@media (max-width: 600px) { .semaine > summary .num { min-width: 0; } .semaine > summary .meta { flex-basis: 100%; order: 3; } }
.plan-version { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.plan-version[hidden] { display: none; }
.plan-version .info { flex: 1; margin: 0; }
/* Faire un test : le test choisi, les mesures du résultat une par ligne */
#t-proposes button[aria-current="true"] .libelle { color: var(--accent-fonce); }
.lignes-test { list-style: none; margin: 4px 0 8px; padding: 0; }
.lignes-test li { padding: 6px 0; border-top: 1px solid var(--trait); font-size: 15px; }
.lignes-test li:first-child { border-top: 0; }
#t-choisi > .tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* la feuille de la page : un formulaire déplacé dedans (« Adapter ») garde sa mise en page sans le cadre de carte */
dialog.feuille .feuille-corps > form.carte { border: 0; box-shadow: none; padding: 0; background: none; }
.alternatives { flex-wrap: wrap; }
.alternatives button { flex: 1 1 100%; text-align: left; }
.connexion button.lien.installer { display: block; margin: 16px auto 0; font-size: 14px; color: var(--doux); }
.connexion button.lien.installer[hidden] { display: none; }
/* les actions d'une séance : « Autre proposition » sur sa ligne, « Adapter » et « Plus… » côte à côte (375 px) */
.resultat .rangee { flex-wrap: wrap; }
.resultat .rangee > [data-act="autre"] { flex: 1 1 100%; }

/* « Signaler un problème » (decision.md S) : la feuille, son champ et l'état de l'envoi */
form.signaler textarea { width: 100%; box-sizing: border-box; min-height: 88px; resize: vertical; font: inherit; font-size: 16px;
  padding: 10px 12px; border: 1px solid var(--trait-champ, var(--trait)); border-radius: 8px; background: var(--nuit, transparent);
  color: inherit; }
form.signaler textarea:focus { border-color: var(--or, var(--accent)); outline: none; }
form.signaler .sg-note { font-size: 13px; margin: 8px 0 0; }
form.signaler .sg-etat:empty { display: none; }
form.signaler .sg-etat { margin: 10px 0 0; font-size: 14px; }
form.signaler .actions { margin-top: 14px; }
/* lot n° 15, point 7 : la capture jointe (lien doux, jamais en or ; vignettes avec une croix ; message doux) */
dialog.feuille .sg-sous { margin: -4px 0 12px; }
form.signaler .sg-qui { margin: 6px 0 0; }
form.signaler .sg-captures { margin-top: 12px; }
form.signaler .sg-ajout { margin: 0; min-height: 44px; display: flex; align-items: center; }
form.signaler .sg-ajouter { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
form.signaler .sg-max { color: var(--doux); font-size: 14px; }
form.signaler .sg-avert { font-size: 13px; margin: 2px 0 0; }
form.signaler .sg-msg { font-size: 13px; margin: 6px 0 0; }
form.signaler .sg-msg:empty { display: none; }
ul.sg-vignettes { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
ul.sg-vignettes:empty { display: none; }
li.sg-vignette { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--relief); }
li.sg-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
li.sg-vignette i.sq { display: block; width: 100%; height: 100%; }
dialog.feuille li.sg-vignette button.op-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; min-height: 28px; }
.vos-signalements p { margin: 0 0 12px; line-height: 1.45; }
/* Envoi d'une séance générée à Garmin (garmin.js) : une ligne à elle, la date lisible jusqu'à 320 px (Recette C4) */
.envoi-garmin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 10px; }
.envoi-garmin label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--doux); flex: 1 1 160px; min-width: 0; }
.envoi-garmin input[type=date] { width: 100%; min-width: 150px; }
.envoi-garmin-message { margin-top: 8px; }
/* graphe de charge : l'entaille d'une semaine de course hors d'échelle (Recette T5) */
svg.charge .coupure { fill: var(--carte); }
/* un test pendant une reprise (libelles.md « Les tests pendant une reprise ») : conditions cochées en vert quand on les
   sait, jamais de rouge ; la question du matin en onze touches, au pouce sur 375 px */
.reprise-test, .tb-reprise { margin: 0 0 12px; }
.reprise-test[hidden] { display: none; }
ul.conditions { list-style: none; margin: 4px 0 10px; padding: 0; font-size: 14px; }
ul.conditions li { padding: 3px 0 3px 22px; position: relative; }
ul.conditions li::before { content: ''; position: absolute; left: 6px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--doux); }
ul.conditions li.ok { color: var(--vert); }
ul.conditions li.ok::before { display: none; }
ul.conditions li.ok svg { position: absolute; left: 0; top: 4px; }
.question-matin { margin-top: 12px; }
.echelle { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin: 6px 0 4px; }
.echelle button { min-width: 0; min-height: 44px; padding: 0; font-size: 15px; }
.echelle button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.question-matin .suite:empty { display: none; }
.question-matin .suite { margin-top: 10px; }
.question-matin .suite .actions { margin: 8px 0 6px; }
/* « Reprise · semaine n sur 10 » : le bandeau de la phase, sous le titre (libelles.md, reprise de 10 semaines, § 3) */
.bandeau-reprise { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); }
/* lot n° 23, point C10 : « Votre plan peut être mis à jour avec les dernières règles › », et son avant/après */
.maj-regles { margin: 0 0 10px; }
.maj-regles button.lien { min-height: 44px; padding: 6px 0; font-size: 14px; text-align: left; }
.maj-jours { list-style: none; margin: 0 0 12px; padding: 0; }
.maj-jours li { padding: 8px 0; border-bottom: 1px solid var(--trait); }
.maj-jours li b { display: block; }
.maj-jours li span { display: block; font-size: 14px; }
.maj-jours .maj-avant { color: var(--doux); text-decoration: line-through; }
/* sur Aujourd'hui, aligné sur « Bonjour » (la vue n'a pas de marge : la salutation porte la sienne) */
.salut + .bandeau-reprise { margin: calc(-1 * var(--espace-3)) var(--espace-5) var(--espace-4); }
/* lot n° 37, point 5 : une carte posée entre la salutation et le bandeau (« Le point du lundi », un arrêt) le laissait
   collé aux bords de l'écran : il garde la marge de « Bonjour » */
.salut ~ .bandeau-reprise { margin-left: var(--espace-5); margin-right: var(--espace-5); }

/* la semaine type (libelles.md « Le planning à créneaux », exemples/planning) : course et renfo en plein, une autre
   activité en pointillé, une case vide montre « + » */
.puces button.puce { padding: 5px 10px; border: 1px solid var(--trait); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 13px; width: auto; min-height: 32px; }
.puces button.puce[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-pale); }
table.semaine-type { width: 100%; border-collapse: separate; border-spacing: 4px; margin: 0 0 8px; }
table.semaine-type th { font-size: 12px; font-weight: 600; color: var(--doux); text-align: left; }
table.semaine-type button.creneau { width: 100%; min-height: 40px; padding: 4px; border-radius: 10px; font-size: 12px; line-height: 1.2;
  border: 1px solid var(--trait); background: none; color: inherit; }
table.semaine-type button.cr-course, table.semaine-type button.cr-renfo { background: var(--accent-pale); border-color: var(--accent); }
table.semaine-type button.cr-autre { border-style: dashed; }
table.semaine-type button.cr-vide { color: var(--doux); }
.puces[hidden] { display: none; }
table.semaine-type { table-layout: fixed; }
table.semaine-type th:first-child { width: 26%; }

/* fiche 5 : la durée saisie d’un créneau, son unité sur la même ligne */
.cr-plus-champ { display: flex; align-items: center; gap: 8px; }
.cr-plus-champ[hidden] { display: none; }
.cr-plus-champ .cr-plus { width: 7em; flex: none; }
.cr-plus-h { color: var(--doux); }

/* lot n° 3, point 18 : « Une séance de course, quand on veut » (libelles.md) — les envies en cartes, deux par ligne */
.envies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.envies label { position: relative; cursor: pointer; }
.envies input { position: absolute; opacity: 0; pointer-events: none; }
.envies label > span { display: block; height: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; }
.envies b { display: block; }
.envies small { display: block; color: var(--doux); font-size: 13px; }
.envies input:checked + span { border-color: var(--accent); background: var(--accent-pale); }
.envies input:focus-visible + span { outline: 2px solid var(--bleu); }
.envies input:disabled + span, #l-durees input:disabled + span { opacity: .4; cursor: default; }
/* lot n° 39, point 5 : ce qui ne va pas avec le choix en cours est grisé, mais reste touchable (il change l'autre) */
.envies input[data-hors] + span, #l-durees input[data-hors] + span { opacity: .45; }
.avance-lien { margin: 10px 0 0; text-align: center; font-size: 13px; }
/* lot n° 5, point 4 : la réglette de l'allure de travail (séance « quand on veut ») */
.reglette { margin: 8px 0 12px; }
.reglette-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 0 0 4px; }
.reglette-valeur { flex: 1 1 auto; min-width: 0; text-align: center; }
.reglette-valeur .reglette-proposee { display: block; margin: 2px 0 0; }
.reglette-ligne button.second { flex: 0 0 auto; }
.reglette-ligne button.second { min-width: 44px; min-height: 40px; font-size: 18px; }
.reglette .aide { margin: 2px 0; }
/* lot n° 5, point 5 : l'objectif de temps (libelles.md, maquette objectif-temps.png) */
.puces button.puce { display: inline-block; padding: 5px 10px; border: 1px solid var(--trait); border-radius: 999px;
  font: inherit; font-size: 13px; background: var(--fond); color: var(--texte); cursor: pointer; }
.puces button.puce[aria-checked="true"] { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-fonce);
  font-weight: 600; }
.temps-saisie { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.temps-saisie input { width: 64px; }
.verdict-temps { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--trait); border-left: 3px solid var(--accent);
  border-radius: 10px; background: var(--carte); }
.verdict-temps p { margin: 0 0 6px; }
.verdict-temps .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* lot n° 27, point 10 : la saison dans le Plan, et l'ajout d'une course */
.carte-saison { margin: 12px 0; }
.carte-saison h3 { margin: 0 0 6px; }
.saison-liste { list-style: none; margin: 0; padding: 0; }
.saison-course { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.saison-course:last-child { border-bottom: 0; }
.saison-texte { display: flex; flex-direction: column; min-width: 0; }
.saison-texte b { overflow-wrap: anywhere; }
.saison-texte small { color: var(--doux); }
.pastille-niveau { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 14px; }
.pastille-niveau.niveau-a { background: var(--accent-pale); color: var(--accent-fonce); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pastille-niveau.niveau-b { background: transparent; color: var(--accent-fonce); box-shadow: inset 0 0 0 1px var(--trait); }
.pastille-niveau.niveau-c { background: var(--bleu-pale); color: var(--texte); }
.sc-apercu, .dep-apercu { margin-top: 12px; }
/* lot n° 49, point 4 d-e : la feuille « Votre saison » et le déplacement d'une course */
.f-deplacer label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-weight: 600; }
.feuille-saison .actions, .f-deplacer .actions, .dep-apercu .actions { display: flex; flex-direction: column; gap: 8px; }
.feuille-saison .actions button, .f-deplacer .actions button, .dep-apercu .actions button { width: 100%; }
.verdict-course { border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--bleu-pale); }
.verdict-course p { margin: 0 0 6px; }
.verdict-course button { width: 100%; margin-top: 6px; }
.verdict-course.verdict-refuser { background: var(--alerte-pale); color: var(--alerte); }
.verdict-course.verdict-proposer, .verdict-course.verdict-borne { background: var(--accent-pale); }
.sc-apercu .avant-apres, .dep-apercu .avant-apres { display: block; margin: 10px 0; font-size: 14px; }   /* la règle commune est en flex */
.aa-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 4.6em; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--trait); align-items: baseline; }
.aa-ligne span:first-child { font-weight: 600; }
.aa-ligne span + span { white-space: nowrap; }
.aa-tete span { color: var(--doux); font-weight: 600; }
.carte-objectif-temps { margin: 10px 0; }
.carte-objectif-temps .marque { display: inline-block; margin: 8px 0 4px; padding: 3px 10px; border: 1px solid var(--trait);
  border-radius: 999px; font-size: 13px; }
/* lot n° 8, point 9 : « Ce que Goatch lit sur votre montre » — une ligne par donnée, son texte dessous */
.blocs.accords-montre li { display: block; }
.blocs.accords-montre .case { display: flex; gap: 8px; align-items: flex-start; }
.blocs.accords-montre .case input { margin-top: 3px; flex: 0 0 auto; }
.blocs.accords-montre li .aide { margin: 4px 0 0 26px; }
.blocs.accords-montre li.sous-ligne { margin-left: 26px; }

/* Lot n° 11, point 19 : la séance simple a deux portes, « Votre envie » et « Une capacité » (libelles.md) ; les cartes
   d'une capacité portent la jauge du coureur en petit (modules/tableau.js, .cap-jauge) */
.portes { display: flex; gap: 18px; border-bottom: 1px solid var(--trait); margin: 0 0 10px; }
.porte { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 0;
  color: var(--doux); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.porte[aria-selected="true"] { color: var(--texte); border-bottom-color: var(--accent); }
#l-capacites .cap-jauge { padding-top: 8px; }
#l-capacites .cap-jauge i { width: 12px; height: 6px; }
#l-envies[hidden], #l-porte-capacite[hidden] { display: none; }

/* lot n° 12, point 26 (B5, retouches.png) : « Charge par semaine » au doigt */
.charge-doigt { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; padding-top: 16px; border-radius: 8px; }
.charge-doigt:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; }
.charge-doigt svg.charge { cursor: ew-resize; }
.charge-doigt svg.charge.lecture rect:not(.coupure) { opacity: .3; transition: opacity .12s; }
.charge-doigt svg.charge.lecture rect.vive { opacity: 1; }
.trait-semaine { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--doux); pointer-events: none; }
.trait-semaine span { position: absolute; top: 0; left: 4px; font-size: 10.5px; color: var(--doux); white-space: nowrap; }
.charge-doigt .curseur { position: absolute; top: 16px; bottom: 0; width: 2px; margin-left: -1px; background: var(--texte); pointer-events: none; }
.bulle-zone { position: relative; z-index: 2; }
.bulle-charge { position: relative; display: flex; flex-direction: column; gap: 8px; width: min(100%, 310px); margin: 0 0 10px; text-align: left;
  background: var(--relief); color: var(--texte); border: 1px solid var(--trait-champ); border-radius: 14px; padding: 12px 14px;
  box-shadow: var(--ombre); font: inherit; cursor: pointer; }
.bulle-charge::after { content: ""; position: absolute; bottom: -7px; left: calc(var(--pointe, 50%) - 6px); width: 12px; height: 12px;
  background: var(--relief); border-right: 1px solid var(--trait-champ); border-bottom: 1px solid var(--trait-champ); transform: rotate(45deg); }
.bulle-charge .b-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bulle-charge .b-tete b { font-family: var(--police-titre); font-weight: 400; font-size: 19px; }
.bulle-charge .b-tete small { color: var(--doux); font-size: 13px; }
.bulle-charge .b-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.bulle-charge .b-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bulle-charge .b-chiffres small { display: block; font-size: 10.5px; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.bulle-charge .b-chiffres b { font-weight: 600; font-size: 14px; }
.bulle-charge .b-mot { font-size: 13px; color: var(--doux); border-top: 1px solid var(--trait); padding-top: 7px; }
.bulle-charge .b-mot b { color: var(--texte); }
.bulle-charge .badge.b-phase { background: var(--relief); color: var(--texte); border: 1px solid var(--trait-champ); }
.geste-charge { margin: 8px 0 0; }

/* lot n° 12, point 26 (B6 et A4, retouches.png) : « 10 jours » en agenda */
.agenda .tete-agenda { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.agenda .tete-agenda .info { margin: 0; }
.agenda-semaine { margin: 12px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.agenda-jour { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.agenda-jour:last-child { border-bottom: 0; }
.agenda-date { display: flex; flex-direction: column; align-items: center; padding: 4px 0 0; background: none; border: 0; color: var(--texte);
  font: inherit; cursor: pointer; min-height: 44px; }
.agenda-date small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.agenda-date b { font-family: "Iowan Old Style", var(--police-titre); font-weight: 400; font-size: 24px; line-height: 1.1; }
.agenda-date em, .agenda-date .change { font-style: normal; font-size: 10px; color: var(--doux); margin-top: 2px; text-align: center; line-height: 1.15; }
.agenda-jour.aujourdhui .agenda-date b { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ivoire); color: var(--nuit); font-size: 20px; margin-top: 2px; }
.agenda-jour.aujourdhui .agenda-date em { color: var(--texte); font-weight: 600; }
.agenda-cartes { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agenda-seance { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; width: 100%; text-align: left;
  background: var(--relief); border: 1px solid var(--trait); color: var(--texte); font: inherit; cursor: pointer; min-height: 44px; }
.agenda-seance.cle { box-shadow: inset 3px 0 0 var(--ivoire); }
.agenda-seance.autre { background: none; border-style: dashed; }
.agenda-seance.autre .agenda-texte b { font-weight: 500; color: var(--doux); }
.agenda-icone { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--carte); color: var(--doux);
  display: flex; align-items: center; justify-content: center; }
.agenda-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.agenda-seance.faite .agenda-icone { background: var(--vert-pale); color: var(--vert); }
.agenda-seance.faite .agenda-texte b { color: var(--doux); }
.agenda-texte { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.agenda-texte small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--doux); }
.agenda-texte b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-texte span { font-size: 12.5px; color: var(--doux); }
.agenda-seance .chevron { color: var(--doux); font-size: 18px; }
/* lot n° 18, point 8 bis : la montre dans le Plan, à la place du chevron (rond de 44 px, contour fin, jamais d'or plein) */
.agenda-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agenda-ligne > .agenda-seance { flex: 1 1 auto; min-width: 0; }
.agenda-ligne.avec-montre .chevron { display: none; }
/* lot n° 22, point 7 bis : le rond est celui de la charte (button.rond-montre, goatch.css) ; ici, sa place dans la ligne */
.agenda-montre { margin: 0; min-height: 44px; }
.agenda-montre-msg { margin: 0; font-size: 13px; color: var(--doux); }
.agenda-montre-msg:empty { display: none; }
.agenda-repos { margin: 0; padding: 10px 0; color: var(--doux); font-size: 14px; }
/* lot n° 16, point 6 (libelles.md « … modifie les séances » § 6, planche orel-modifie.png) : la trace d'un changement,
   une ligne en doux précédée de la marque du coach (14 px) ; jamais de couleur d'alerte */
.trace-coach { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; font-size: 12px; color: var(--doux); }
.agenda-texte .trace-coach { font-size: 12px; white-space: normal; }
.sea .titre .trace-coach { font-weight: 400; }
.trace-coach .marque-coach { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  background: var(--ivoire) url("/coach/coach-repos.svg") center / 120% no-repeat; }
.sr-trace { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trace-seance { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 8px; font-size: 12px; color: var(--doux); }
.trace-seance .trace-coach { margin: 0; }
.trace-seance .lien-trace { background: none; border: 0; padding: 0 4px; min-height: 32px; font: inherit; font-size: 12px;
  color: var(--doux); text-decoration: underline; cursor: pointer; }
.agenda-seance.rangee-apres-coup { cursor: default; }
p.trace-coach { padding: 6px 0; }
/* lot n° 36, point 3 : la version combinée proposée par le plan, sous la ligne de la séance */
.combine-propose { margin: 4px 0 10px; }
.combine-propose p.info { margin: 0 0 4px; }

/* lot n° 12, point 28 (B8, retouches.png ; décision de Thomas du 7 octobre) : la barre du bas, arrondie et flottante,
   OPAQUE (le bleu des cartes, ni flou ni transparence : le contenu ne se voit pas à travers). Quatre icônes seules (le
   nom reste pour le lecteur d'écran) ; l'onglet ouvert dans une pastille --relief, sans or. Le coach à côté, dans un rond
   opaque de la même hauteur. app.css passe avant goatch.css : d'où les sélecteurs plus précis (html body …). */
html body.avec-onglets { --hauteur-onglets: 64px; }   /* 12 px de marge + 60 px de barre = 64 + les 8 px des calculs */
html body nav.barre-onglets { left: calc(14px + env(safe-area-inset-left)); right: calc(14px + 60px + 10px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom)); padding: 5px; border-radius: 999px; background: var(--abysse);
  border: 1px solid var(--nuit-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: none; backdrop-filter: none; }
html body nav.barre-onglets button { height: 48px; min-height: 48px; gap: 0; border-radius: 999px; font-size: 0; color: var(--doux); }
html body nav.barre-onglets button[aria-current="page"] { background: var(--relief); color: var(--texte); }
html body nav.barre-onglets button:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
html body nav.barre-onglets svg { width: 25px; height: 25px; }
html body .coach-bouton, html body.barre-plan-visible .coach-bouton { right: calc(14px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%; background-color: var(--abysse);
  background-size: 46px; border: 1px solid var(--nuit-trait); box-shadow: var(--ombre); filter: none; }
/* lot n° 13, point 13 (n° 151, Recette : au premier affichage du téléphone, la barre couvrait une ligne de choix) : un
   voile du fond du bas d'écran, de la barre jusqu'au bord, fondu sur 20 px au-dessus d'elle. Le contenu passe DERRIÈRE
   le voile, jamais à moitié sous la barre ; la page garde sa marge du bas (padding-bottom) pour tout faire remonter. */
.voile-onglets { display: none; }
html body.avec-onglets .voile-onglets { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; pointer-events: none;
  height: calc(12px + 60px + 12px + 20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0, var(--fond-bas) 20px); }
html body.chiron-clavier .voile-onglets { display: none; }
@media (max-width: 639px) { html body.chiron-plein .voile-onglets { display: none; } }
@media print { html body .voile-onglets { display: none; } }
@media (max-width: 900px) {   /* la barre « Plan non enregistré » se pose 8 px au-dessus de la barre flottante (12 + 60) */
  html body .barre-plan:not([hidden]) { bottom: calc(12px + 60px + 8px + env(safe-area-inset-bottom)); }
}
@media (min-width: 640px) {
  html body nav.barre-onglets { left: calc(50% - 215px); right: auto; width: 360px; }
  html body .coach-bouton, html body.barre-plan-visible .coach-bouton { right: auto; left: calc(50% + 155px); }
}

/* lot n° 32 bis, point 15 quinquies : les réponses de suivi de la fiche « état de santé » sur Aujourd'hui */
.tb-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* --- lot n° 40, point 2 : le Plan réorganisé (onglets.md, validé le 13/10) --- */
/* n° 38 : une séance faite montre la mesure de la montre, une coche verte ; son titre passe en doux */
.sea-faite .titre { color: var(--doux); }
.fait-coche { color: var(--vert); font-weight: 700; margin-right: 2px; }
/* n° 40 : la ligne courte qui protège, au style de « 1 remarque sur votre plan », sous la jauge */
button.remarque.protege { margin-top: 12px; }
/* « Estimation du temps » : la courbe des chances, lue au doigt (comme « Charge par semaine ») */
details.estimation .temps-estime { margin: .6em 0 .2em; color: var(--texte); }
.cloche { margin: .6em 0 .2em; }
.cloche-titre { display: flex; align-items: center; gap: 6px; margin: 0 0 .3em; }
.cloche-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cloche-bande { fill: var(--ivoire); opacity: .06; }
.cloche-ligne { fill: none; stroke: var(--or); stroke-width: 3; }
.cloche-sol { stroke: currentColor; opacity: .25; }
.cloche-axe { fill: currentColor; opacity: .55; font-size: 20px; }
.cloche-curseur { stroke: var(--or); stroke-width: 1.5; opacity: .8; }
.cloche-point { fill: var(--or); }
.cloche-bulle { fill: var(--relief); stroke: var(--or); stroke-opacity: .5; }
.cloche-bulle-mot { fill: var(--ivoire); font-size: 19px; font-weight: 700; }
/* lot n° 43, point 3 : la ligne 2 de la bulle, « 80 % de chances entre … et … » (Marque, 9-plan-80) */
.cloche-bulle-fenetre { font-weight: 500; opacity: .8; }
.carte-saison .actions.rangee { margin-top: 12px; }
/* lot n° 40, point 5 (onglets.md, maquette 5-sentrainer-course-un-test) : les trois façons de choisir, en segments */
#f-libre #l-segments { margin-bottom: 12px; }
#l-test-prochain { margin: .6em 0 0; }
/* lot n° 40, point 2 : les traces du coach dans la semaine du Plan (elles étaient dans « 10 jours ») */
.sea.rangee-apres-coup { cursor: default; }
.sea.rangee-apres-coup:hover { background: none; }
.seances > p.trace-coach { padding: 6px 16px; margin: 0; border-top: 1px dashed var(--trait); }
/* lot n° 40, point 2 : la montre sur les lignes de la semaine (elle était sur « 10 jours ») : le rond à droite de la
   ligne, à côté d'elle ; les filets entre lignes restent les mêmes */
.sea-ligne { display: flex; align-items: center; }
.sea-ligne > .sea { flex: 1 1 auto; min-width: 0; }
.sea-ligne > .agenda-montre { flex: none; margin-right: 12px; }
.sea-ligne + .sea, .sea + .sea-ligne, .sea-ligne + .sea-ligne, .agenda-montre-msg + .sea, .agenda-montre-msg + .sea-ligne { border-top: 1px dashed var(--trait); }
.seances > .agenda-montre-msg { padding: 0 16px 8px; }

/* lot n° 42, point 1 a (signalement n° 42) : « Charge par semaine » revient dans « Semaines suivantes » ; ses barres
   prennent les couleurs de la charte (.histo), à sa hauteur d'avant le lot n° 40 ; la légende en pastilles ; une
   semaine passée se lit dans la bulle sans s'ouvrir */
svg.charge.histo { height: 130px; }
.legende i.lg-charge { background: var(--g-charge); } .legende i.lg-allegee { background: var(--g-allegee); }
.legende i.lg-test { background: var(--g-test); } .legende i.lg-affutage { background: var(--g-affutage); }
.legende i.lg-course_objectif { background: var(--texte); }
div.bulle-charge.passee { cursor: default; }

/* lot n° 44, point 1 : « Inviter un ami » (le propriétaire seulement) */
.comptes-liste { list-style: none; margin: 0 0 16px; padding: 0; }
.compte-ami { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.compte-nom { font-weight: 600; }
.compte-etat { flex: 1 1 auto; color: var(--doux); font-size: 13px; }
.compte-ami .lien { min-height: 44px; }
.comptes-lien { margin: 0 0 16px; }
.comptes-lien .compte-url { width: 100%; box-sizing: border-box; margin: 6px 0 8px; }
.comptes-lien .copier-lien { min-height: 44px; }

/* lot n° 50, point 3 : l'écran plein de l'accord d'un ami avant le vrai coach (écran 30 de Marque) */
.accord-coach { max-width: 560px; margin: 0 auto; padding: 0 20px 32px; }
.accord-coach[hidden] { display: none; }
.accord-coach .titre-page { margin: 8px 0 18px; }
.accord-coach .carte { margin: 0 0 18px; padding: 18px 18px 4px; }
.accord-coach .carte p { margin: 0 0 14px; }
.accord-actions { flex-direction: column; gap: 10px; }
.accord-actions button { margin: 0; }
.accord-ligne { margin: 14px 2px 0; font-size: 13px; color: var(--doux); }
.accord-coach .refus[hidden] { display: none; }
body.accord-ouvert main.vue, body.accord-ouvert nav.barre-onglets, body.accord-ouvert .chiron-bouton { display: none; }
/* lot n° 56, point 1 : l'écran « Avant d'entrer » et la charte de confidentialité (une colonne, lisible sans zoom) */
.connexion.entree { max-width: 560px; margin-top: 4vh; }
.entree .entree-point p { margin: 0 0 10px; }
.entree .entree-point { margin-bottom: 14px; }
.entree .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.entree .entree-charte { margin: 4px 0 0; }
.charte-texte h2 { font-size: 17px; margin: 22px 0 8px; }
.charte-texte ul { padding-left: 20px; }
.charte-texte li { margin-bottom: 8px; }
.charte-texte table { width: 100%; border-collapse: collapse; font-size: 14px; }
.charte-texte th, .charte-texte td { text-align: left; vertical-align: top; padding: 6px 4px; border-bottom: 1px solid var(--trait); }
/* lot n° 56, point 4 : la case de relecture, et le responsable des données (Profil › Vos données) */
.accord-relecture { margin: 0 2px 16px; }
.accord-relecture .accord-ligne { margin-top: 6px; }
.pf-relecture .aide, .pf-responsable .aide { margin: 4px 0 0; }
.pf-responsable { padding: 12px 2px 4px; }
.pf-responsable h3 { margin: 0 0 6px; font-size: 15px; }
.pf-responsable input.copiable { display: block; width: 100%; margin-top: 6px; background: transparent; color: inherit; border: 1px solid var(--trait); border-radius: 8px; padding: 8px; font: inherit; }