/* ==================================================================
     LE STYLE
     ------------------------------------------------------------------
     Direction : noir absolu, typographie lourde, chiffres lisibles à
     bout de bras. La couleur ne décore rien — elle ne sert qu'à dire
     où tu en es par rapport à ton objectif : vert atteint, ambre en
     cours, rouge en dessous. Tout le reste est noir, blanc, gris.

     C'est ce qui permet de lire une séance d'un coup d'œil sous les
     néons : l'œil cherche la couleur, il ne doit en trouver que là où
     il y a une information.
     ================================================================== */

  :root {
    --noir: #000000;
    --surface: #141414;      /* les blocs posés sur le fond */
    --trait: #292929;        /* les filets de séparation */
    --blanc: #ffffff;
    --gris: #8c8c8c;         /* le texte secondaire */

    /* Les trois couleurs d'information, et rien d'autre : où tu en es
       par rapport à un objectif. */
    --vert: #00d97e;
    --ambre: #ffb020;
    --rouge: #ff453a;

    /* Une quatrième, à part : pas une réponse à un objectif, mais un
       langage pour les petits boutons — voir plus bas. */
    --bleu: #0a84ff;
  }

  * { margin: 0; padding: 0; box-sizing: border-box;
      /* Le surlignage gris que Safari peint sur tout élément touché.
         C'est le signe numéro un qu'on est dans un navigateur : aucune
         app native ne fait ça. On l'enlève partout, et chaque bouton
         donne sa propre réponse au doigt (voir button:active). */
      -webkit-tap-highlight-color: transparent; }

  body {
    background: var(--noir);
    color: var(--blanc);
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    line-height: 1.35;
    padding: calc(18px + env(safe-area-inset-top)) 18px
             calc(110px + env(safe-area-inset-bottom));
    max-width: 540px;
    margin: 0 auto;
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;

    /* Trois réflexes de navigateur qu'une app n'a pas :
       — la sélection de texte à l'appui long sur un titre ou un bouton
         (rendue aux champs de saisie juste en dessous) ;
       — le menu « Copier / Rechercher » qui surgit du même geste ;
       — le rebond élastique quand on tire la page au-delà du haut. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior-y: none;
  }

  /* La sélection reste indispensable là où on lit et copie vraiment :
     les champs, et surtout la zone d'export des données. */
  input, textarea, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
  }

  header p {
    color: var(--gris);
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
  }
  header p:empty { display: none; }

  /* --- Les deux vues --- */
  /* --- La barre de sections, fixée en bas ---
     Le pouce y arrive sans effort, et le contenu gagne le haut de
     l'écran. C'est la disposition des applications mobiles depuis que
     les téléphones ont grandi. */
  .vues {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--trait);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .vues button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--gris);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 11px 4px 10px;
    cursor: pointer;
  }
  .vues svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .vues button.actif { color: var(--blanc); }

  /* Le minuteur se pose juste au-dessus de la barre de navigation :
     sa position est définie dans le bloc .minuteur plus bas, avec le
     reste de son style. Y remettre un `bottom` ici le ferait passer
     DERRIÈRE la barre — c'est la dernière règle qui gagne. */

  /* Le message de confirmation, au-dessus de tout le reste */
  #message {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 50;
    background: var(--blanc);
    color: var(--noir);
    font-size: 14px;
    font-weight: 600;
    padding: 13px 16px;
    border-radius: 2px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  #message.visible { opacity: 1; transform: translateY(0); }
  /* Un message porteur d'action doit rester cliquable */
  #message.avec-action {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
  }
  #message .annuler {
    flex-shrink: 0;
    background: var(--noir);
    border: none;
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 9px 14px;
    cursor: pointer;
  }
  /* Quand le minuteur est ouvert, le message monte au-dessus de lui */
  body.minuteur-ouvert #message { bottom: calc(160px + env(safe-area-inset-bottom)); }

  @media (prefers-reduced-motion: reduce) {
    #message { transition: opacity 0.18s ease; transform: none; }
  }

  /* Trois vues, une seule visible. Le nom de la vue courante est posé
     sur le body : chaque section dit à quelle vue elle appartient, et
     le CSS masque tout le reste. Aucune logique d'affichage à tenir
     dans le JavaScript. */
  .vue-seance, .vue-progression, .vue-donnees { display: none; }
  body.vue-en-seance .vue-seance,
  body.vue-en-progression .vue-progression,
  body.vue-en-donnees .vue-donnees { display: block; }

  /* --- Les boutons génériques --- */
  button { -webkit-tap-highlight-color: transparent; }

  /* En remplacement du surlignage retiré plus haut : un assombrissement
     bref, le temps que le doigt est posé. Les boutons qui avaient déjà
     leur propre réponse (.rep, .ajouter, .action-icone...) gardent la
     leur — leurs sélecteurs sont plus spécifiques et l'emportent. */
  button:active { opacity: 0.6; }

  /* Le changement de vue ne doit pas être un saut. Les blocs d'une vue
     passent de display:none à block quand la classe du body change :
     c'est ce passage qui déclenche l'animation, sans une ligne de JS.
     :not(nav) écarte la barre d'onglets et la barre du bas, qui ne
     doivent pas bouger — et dont un transform casserait le collage. */
  @keyframes entree-vue {
    from { opacity: 0; transform: translateY(8px); }
  }
  body.vue-en-seance .vue-seance:not(nav),
  body.vue-en-progression .vue-progression:not(nav),
  body.vue-en-donnees .vue-donnees:not(nav) {
    animation: entree-vue 200ms cubic-bezier(0.2, 0, 0, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    body.vue-en-seance .vue-seance:not(nav),
    body.vue-en-progression .vue-progression:not(nav),
    body.vue-en-donnees .vue-donnees:not(nav) { animation: none; }
  }

  /* L'écran de démarrage : un rectangle noir posé par-dessus tout, le
     temps que les données soient lues et l'écran construit. Sans lui,
     on voit la barre du bas apparaître seule, puis le contenu tomber
     dedans. Il s'efface et se retire de la page une fois le premier
     affichage fait. */
  #demarrage {
    position: fixed;
    inset: 0;
    background: var(--noir);
    z-index: 70;
    pointer-events: none;
    transition: opacity 260ms ease;
  }
  #demarrage.parti { opacity: 0; }
  input:focus, textarea:focus, select:focus, button:focus-visible {
    outline: 2px solid var(--blanc);
    outline-offset: 2px;
  }

  /* --- L'alerte de sauvegarde --- */
  .alerte {
    background: rgba(255, 69, 58, 0.12);
    border-left: 3px solid var(--rouge);
    padding: 13px 15px;
    margin-top: 24px;
    font-size: 14px;
  }
  .alerte[hidden] { display: none; }
  /* Le même bandeau sert à informer : on lui retire alors le rouge */
  .lien-recharger {
    background: none;
    border: none;
    color: var(--blanc);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    cursor: pointer;
  }
  .alerte.info {
    background: rgba(255, 255, 255, 0.07);
    border-left-color: var(--blanc);
  }

  /* --- La navigation dans le temps --- */
  body.vue-en-seance .barre-date { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
  .barre-date button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 14px;
    padding: 10px 13px;
    cursor: pointer;
  }
  .barre-date button[hidden] { display: none; }
  .barre-date #bouton-date {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .barre-date #bouton-aujourdhui { font-size: 12px; color: var(--gris); }
  body.passe .barre-date #bouton-date { border-color: var(--blanc); color: var(--blanc); }

  /* --- Le calendrier --- */
  #calendrier[hidden] { display: none; }
  .calendrier {
    background: var(--surface);
    padding: 16px 14px 12px;
    margin-top: 14px;
  }
  .cal-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .cal-entete span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .cal-entete button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    padding: 6px 13px;
    cursor: pointer;
  }
  /* minmax(0, 1fr) : sans le 0, une case peut réclamer plus large que
     sa part et pousser les dernières colonnes hors de l'écran. */
  .cal-jours, .cal-grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }
  .cal-jour-nom {
    font-size: 11px;
    font-weight: 700;
    color: var(--gris);
    text-align: center;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
  }
  /* Hauteur imposée à toutes les lignes : sinon chacune s'aligne sur
     sa case la plus haute et le mois se décale. */
  .cal-grille { grid-auto-rows: 42px; }
  .cal-case {
    position: relative;
    height: 100%;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--blanc);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
  }
  .cal-case.vide { visibility: hidden; }
  .cal-case.hors { color: var(--trait); }
  .cal-case.aujourdhui { text-decoration: underline; text-underline-offset: 4px; }
  .cal-case.active { background: var(--blanc); color: var(--noir); font-weight: 700; }
  .cal-pastille {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gris);
  }
  .cal-case.active .cal-pastille { background: var(--noir); }
  .cal-legende { font-size: 11px; color: var(--gris); margin-top: 14px; }

  /* --- Les onglets de séance --- */
  body.vue-en-seance .onglets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin-top: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--trait);
  }
  .onglets button {
    background: none;
    border: none;
    border-top: 2px solid var(--trait);
    color: var(--gris);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 11px 2px 0;
    cursor: pointer;
  }
  .onglets button.actif { border-top-color: var(--blanc); color: var(--blanc); }
  .jour-seance { font-size: 12px; color: var(--gris); margin-top: 14px; }
  .jour-seance:empty { display: none; }

  /* --- La saisie ---
     Un panneau encadré, nettement détaché de la barre de navigation
     au-dessus : c'est l'endroit où tu agis, il doit se distinguer de
     ce qui ne sert qu'à te repérer. */
  .saisie {
    background: var(--surface);
    border: 1px solid var(--trait);
    padding: 18px 16px;
    margin: 30px 0 10px;
  }
  /* Dans le panneau, les champs reprennent le fond noir pour ressortir */
  .saisie input, .saisie select, .trio select { background: var(--noir); }
  label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 7px;
  }
  input, textarea, select {
    width: 100%;
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--trait);
    border-radius: 0;
    color: var(--blanc);
    font: inherit;
    font-size: 16px;
    padding: 13px 12px;
    -webkit-appearance: none;
  }
  /* Les suggestions, collées sous le champ */
  .suggestions { display: flex; flex-direction: column; }
  .suggestions button {
    background: var(--noir);
    border: none;
    border-bottom: 1px solid var(--trait);
    color: var(--blanc);
    font: inherit;
    font-size: 14px;
    text-align: left;
    padding: 12px;
    cursor: pointer;
  }
  .suggestions button:active { background: var(--surface); }
  .suggestions:empty { display: none; }

  .trio { display: grid; grid-template-columns: 1fr 1fr 0.7fr; gap: 8px; margin-top: 14px; }

  .modes { display: flex; gap: 6px; flex-wrap: wrap; }
  .mode {
    flex: 1;
    margin-top: 14px;
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 13px;
    padding: 10px 8px;
    cursor: pointer;
  }
  .mode.actif { border-color: var(--bleu); color: var(--bleu); }

  button.ajouter {
    width: 100%;
    margin-top: 14px;
    background: var(--blanc);
    color: var(--noir);
    border: none;
    border-radius: 2px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 17px;
    cursor: pointer;
  }
  button.ajouter:active { opacity: 0.7; }

  .rappel { margin-top: 14px; font-size: 13px; color: var(--gris); min-height: 18px; }

  /* --- Le bilan --- */
  .bilan { border-top: 2px solid var(--blanc); padding: 16px 0 4px; margin-top: 24px; }
  .bilan h2 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .bilan ul { list-style: none; margin-top: 14px; }
  .bilan li { font-size: 14px; color: var(--gris); padding: 6px 0 6px 15px; position: relative; }
  .bilan li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 13px;
    width: 5px;
    height: 5px;
    background: var(--gris);
  }
  .bilan li.bien { color: var(--blanc); }
  .bilan li.bien::before { background: var(--vert); }
  .bilan li.attention::before { background: var(--ambre); }
  .bilan li b { color: var(--blanc); }

  /* --- Un exercice ---
     Chaque exercice est un bloc distinct posé sur le fond, avec un vrai
     intervalle entre eux. Sur une séance de six exercices, la
     séparation compte autant que le contenu : sans elle, l'écran
     devient un mur de chiffres. */
  .exercice {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-left-width: 3px;
    padding: 18px 15px 8px;
    margin-top: 24px;
  }
  /* Un exercice enchaîné au suivant : le trait de gauche se prolonge
     vers le bas pour montrer que les deux blocs n'en font qu'un. */
  .exercice.enchaine {
    border-left-color: var(--blanc);
    border-bottom-color: transparent;
    margin-bottom: -14px;
    padding-bottom: 22px;
    position: relative;
  }
  .exercice.enchaine::after {
    content: 'superset';
    position: absolute;
    left: 14px;
    bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gris);
  }
  .exercice.enchaine + .exercice { border-left-color: var(--blanc); }

  /* Le bloc soulevé : il grandit un peu, s'éclaircit et projette une
     ombre franche. C'est ce décollement qui rend le geste lisible. */
  .exercice {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  .exercice.saisi {
    border-left-color: var(--blanc);
    background: #262626;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 30;
  }
  /* Pendant le déplacement, le bloc suit le doigt sans amortissement :
     un délai, même court, donnerait une impression de flottement. */
  body.deplacement .exercice.saisi { transition: none; }

  /* Les autres blocs s'effacent pour laisser la sélection au premier plan */
  body.deplacement .exercice:not(.saisi) {
    opacity: 0.45;
    transition: opacity 0.18s ease, transform 200ms cubic-bezier(0.2, 0, 0, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .exercice { transition: none; }
  }
  /* Pendant un déplacement, plus rien d'autre ne réagit au doigt */
  body.deplacement { user-select: none; -webkit-user-select: none; }

  .exercice-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  /* touch-action: none sur tout l'en-tête : c'est ce qui permet de
     maintenir puis glisser sans que la page ne parte au défilement. */
  .poignee {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    touch-action: none;
  }
  /* touch-action: none dit au navigateur de ne PAS interpréter le geste
     comme un défilement. Sans cette ligne, iOS prend la main dès que le
     doigt bouge et le déplacement est annulé. */
  .prise {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 40px;
    margin-left: -10px;
    touch-action: none;
    cursor: grab;
  }
  .prise:active { cursor: grabbing; }
  /* Les trois barres, dessinées en CSS plutôt qu'avec un caractère :
     un glyphe peut manquer selon la police du téléphone. */
  .grip {
    width: 15px;
    height: 11px;
    border-top: 2px solid #4a4a4a;
    border-bottom: 2px solid #4a4a4a;
    position: relative;
  }
  .grip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 3.5px;
    border-top: 2px solid #4a4a4a;
  }
  .exercice.saisi .grip, .exercice.saisi .grip::after { border-color: var(--blanc); }

  .exercice h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .actions-exo { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

  /* Les boutons en icône : zone tactile confortable, dessin discret */
  .action-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    color: var(--gris);
    padding: 0;
    cursor: pointer;
    position: relative;
  }
  .action-icone svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .action-icone:active { color: var(--blanc); }

  /* Armé : la poubelle rougit et un « ? » signale le second appui */
  .action-icone.arme { color: var(--rouge); }
  .action-icone.arme::after {
    content: '?';
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--rouge);
  }
  .suppr {
    background: none;
    border: none;
    color: var(--gris);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 0 4px 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  .suppr.arme { color: var(--rouge); }

  /* La ligne d'objectif */
  .objectif {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    font-size: 12px;
    color: var(--gris);
  }
  .objectif .cible {
    background: none;
    border: none;
    color: var(--gris);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--trait);
    text-underline-offset: 4px;
  }
  .objectif .cible.defini { color: var(--bleu); }
  .progres { white-space: nowrap; font-size: 12px; }
  .progres.atteint { color: var(--vert); font-weight: 700; }

  /* La cible du jour */
  .cible-jour {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 14px;
    font-size: 13px;
    color: var(--gris);
    border-left: 2px solid var(--blanc);
    padding: 10px 0 10px 12px;
    margin: 6px 0 10px;
  }
  .cible-jour b {
    color: var(--blanc);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .cible-jour .avant { color: var(--gris); }
  .cible-jour .compteur { font-size: 14px; font-weight: 700; white-space: nowrap; }
  .cible-jour .compteur.atteint { color: var(--vert); }

  /* --- Une ligne de charge : le cœur de l'écran --- */
  .charge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 0;
    border-bottom: 1px solid var(--trait);
  }
  .kg {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    min-width: 86px;
  }
  .detail-tare { font-size: 11px; color: var(--gris); }

  /* Chaque série est une pastille. La couleur dit tout. */
  .rep {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    min-width: 46px;
    padding: 10px 4px;
    cursor: pointer;
  }
  .rep:active { opacity: 0.6; }
  .rep.atteint { background: var(--vert); border-color: var(--vert); color: var(--noir); font-weight: 800; }
  .rep.dans { border-color: var(--ambre); color: var(--ambre); }
  .rep.sous { border-color: var(--rouge); color: var(--rouge); }

  .encore {
    background: none;
    border: 1px dashed var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 16px;
    min-width: 46px;
    padding: 10px 12px;
    cursor: pointer;
  }
  .encore:active { opacity: 0.6; }

  .conseil { font-size: 13px; color: var(--vert); padding: 10px 0 0; }

  /* La saisie sur place */
  .saisie-rep { display: inline-flex; align-items: center; gap: 5px; }
  .saisie-rep input {
    width: 56px;
    padding: 9px 4px;
    font-size: 16px;
    text-align: center;
    background: var(--noir);
    border: 1px solid var(--blanc);
  }
  .saisie-rep input.kg { width: 68px; font-size: 16px; font-weight: 500; letter-spacing: 0; }
  .saisie-rep .entre { color: var(--gris); font-size: 13px; }
  .valider {
    background: var(--blanc);
    border: none;
    border-radius: 2px;
    color: var(--noir);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 9px 14px;
    cursor: pointer;
  }
  .saisie-objectif { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .saisie-objectif input {
    width: 50px;
    padding: 8px 2px;
    font-size: 14px;
    text-align: center;
    background: var(--noir);
    border: 1px solid var(--blanc);
  }
  .saisie-objectif input.nom { width: 140px; text-align: left; padding-left: 9px; }

  /* Les petits boutons secondaires
     ------------------------------------------------------------------
     Trois familles, trois langages, pour qu'un coup d'œil sous les
     néons dise ce qui répond au doigt et ce qui ne fait qu'informer :

       .mode-mini  — un réglage qui bascule (Unilatéral, + poids du
                     corps, par bras...). Gris au repos, BLEU une fois
                     actif — c'est la seule chose que le bleu veut
                     dire dans toute l'app.
       .action-mini — une action qui ouvre un choix (+ équivalence,
                     machine prise...). Toujours en BLANC : elle n'a
                     pas d'état, elle ne fait que s'exécuter.
       .tag-info   — une étiquette qui ne répond pas au doigt (guidée,
                     bilatéral, dropset). Du texte, sans cadre : un
                     cadre appelle un appui, celle-ci n'en attend pas.
     ------------------------------------------------------------------ */
  .mode-mini, .action-mini {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 6px 9px;
    cursor: pointer;
  }
  .mode-mini.actif { border-color: var(--bleu); color: var(--bleu); }
  .action-mini { border-color: var(--blanc); color: var(--blanc); }
  .tag-info {
    color: var(--gris);
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  /* Un dropset ne vise pas une cible : il descend jusqu'à l'échec.
     Le souligné pointillé le distingue sans emprunter au code couleur
     d'objectif ni faire croire à un bouton. */
  .tag-info.drop {
    letter-spacing: 0.06em;
    border-bottom: 1px dashed var(--trait);
    padding-bottom: 1px;
  }
  .badge-choix {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    text-align: left;
  }
  .badge-choix .nom-equiv { color: var(--blanc); font-size: 13px; }
  .badge-choix .detail-equiv { font-size: 11px; color: var(--gris); }
  /* par bras / par jambe / par côté : un réglage comme un autre, donc
     le même bleu une fois confirmé. Tant qu'il n'est que deviné
     d'après la séance, le pointillé le dit — sans présumer un choix
     que tu n'as pas fait. */
  .badge-cote.devine { border-style: dashed; border-color: var(--trait); color: var(--gris); }
  .choix-cote { display: inline-flex; gap: 5px; flex-wrap: wrap; }

  /* Les équivalences */
  .equivalences {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 4px;
  }
  .equivalences .etiquette {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gris);
  }
  .equivalences .equiv { display: inline-flex; align-items: center; }
  .equivalences .oublier, .choix-machine .oublier {
    background: none;
    border: none;
    color: var(--gris);
    font: inherit;
    font-size: 14px;
    padding: 4px 6px;
    cursor: pointer;
  }
  .ligne-equiv { padding-bottom: 10px; border-bottom: 1px solid var(--trait); }
  .choix-machine { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
  .choix-machine .equiv { display: inline-flex; align-items: center; }

  /* Le repos */
  .repos {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 0;
    font-size: 12px;
    color: var(--gris);
  }
  select {
    width: auto;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--trait);
    cursor: pointer;
  }
  /* Dans le formulaire de saisie, les menus occupent la même place que
     les champs qu'ils remplacent. */
  .trio select {
    width: 100%;
    font-size: 16px;
    padding: 13px 12px;
    border: none;
    border-bottom: 1px solid var(--trait);
    background: var(--surface);
    text-align: center;
  }

  .vide { color: var(--gris); margin-top: 26px; font-size: 14px; }

  /* --- La note de séance --- */
  .note-seance { margin-top: 26px; }
  .note-seance button {
    width: 100%;
    text-align: left;
    background: none;
    border: 1px dashed var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 14px;
    padding: 14px;
    cursor: pointer;
  }
  /* Une note écrite n'est plus une invite : elle devient du contenu */
  .note-seance button.ecrite {
    border-style: solid;
    border-left: 3px solid var(--gris);
    color: var(--blanc);
    line-height: 1.4;
  }
  .saisie-note { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
  .saisie-note textarea { height: 76px; margin-top: 0; font-family: inherit; font-size: 14px; }
  .saisie-note .valider { align-self: flex-start; padding: 11px 18px; }

  .note-rappel {
    font-size: 13px;
    color: var(--blanc);
    border-left: 3px solid var(--trait);
    padding: 4px 0 4px 10px;
    margin: 8px 0 4px;
  }

  /* --- Reste à faire --- */
  .a-faire { margin-top: 38px; }
  .a-faire .invite { font-size: 12px; color: var(--gris); margin: 6px 0 2px; }
  .a-faire h2, .precedente h2, .import h2, .archives h2, .ia h2, .son h2 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
  }
  .a-faire .ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
    color: var(--gris);
    position: relative;
    background: var(--noir);
    touch-action: pan-y;
  }
  .a-faire .ligne span { color: var(--blanc); font-weight: 600; }
  .a-faire .ligne.cliquable { cursor: pointer; }
  .a-faire .ligne.cliquable:active { background: var(--surface); }

  /* L'enveloppe cache le bouton rouge tant que la ligne n'a pas glissé :
     .ligne est opaque (fond noir) et posée par-dessus en position
     relative, donc elle le couvre entièrement au repos. */
  .a-faire .ligne-enveloppe { position: relative; overflow: hidden; }
  .a-faire .ligne-suppr {
    position: absolute;
    inset: 0;
    background: var(--rouge);
    color: var(--blanc);
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
  }
  .a-faire .ligne-suppr svg { width: 18px; height: 18px; }

  /* Un bref éclat pour montrer où le contenu a atterri */
  .saisie.rempli {
    border-color: var(--blanc);
    transition: border-color 0.7s ease;
  }
  .a-faire .ligne span.cible { color: var(--gris); font-weight: 400; text-align: right; }
  .remplacement { font-size: 12px; color: var(--gris); padding: 3px 0 6px; }
  .nouvel-objectif {
    margin-top: 14px;
    background: none;
    border: 1px dashed var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 13px;
    padding: 11px 15px;
    cursor: pointer;
  }

  /* --- La séance précédente --- */
  .precedente { margin-top: 38px; color: var(--gris); }
  .precedente .ligne {
    font-size: 13px;
    padding: 9px 0;
    border-bottom: 1px solid var(--trait);
  }
  .precedente .ligne span { color: var(--blanc); font-weight: 600; }

  /* --- L'historique --- */
  /* Il vit dans l'onglet Données depuis la v89, et replié par défaut :
     quinze séances à la suite occupaient tout le bas de l'accueil. */
  .historique { margin-top: 38px; }

  /* Le titre est un bouton : il porte le même habillage que les h2 des
     autres sections, plus le compte et le chevron sur la droite. */
  .historique .titre-depli {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 2px;
    color: var(--gris);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }
  .historique .titre-depli .droite {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
  .historique .titre-depli svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Le chevron pointe vers la droite au repos, vers le bas déplié */
    transition: transform 0.2s ease;
  }
  .historique.ouvert .titre-depli svg { transform: rotate(90deg); }
  .historique .titre-depli:active { color: var(--blanc); }
  .historique .liste-seances[hidden] { display: none; }
  .historique .tronque { font-size: 12px; color: var(--gris); margin: 10px 0 0; }

  .historique .ligne-seance { display: flex; align-items: center; gap: 8px; }

  /* --- Les prises rétroactives --- */
  .retro { margin-top: 38px; }
  .retro .titre-depli {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; background: none; border: none; padding: 0 0 2px;
    color: var(--gris); font: inherit; font-size: 12px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase; text-align: left; cursor: pointer;
  }
  .retro .titre-depli .droite {
    display: flex; align-items: center; gap: 7px;
    font-weight: 600; letter-spacing: 0; text-transform: none;
  }
  .retro .titre-depli svg {
    width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.2s ease;
  }
  .retro.ouvert .titre-depli svg { transform: rotate(90deg); }
  .retro .titre-depli:active { color: var(--blanc); }
  .retro .corps[hidden] { display: none; }
  .retro .explication { font-size: 12px; color: var(--gris); margin: 10px 0 4px; }
  .retro .bloc-sans-prise {
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
  }
  .retro .quoi { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .retro .quoi b { color: var(--blanc); font-weight: 700; font-size: 14px; }
  .retro .quoi span { color: var(--gris); font-size: 12px; text-align: right; }
  .retro .choix { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
  .retro .vide { font-size: 13px; color: var(--gris); padding: 12px 0; }
  .historique .ligne-seance .suppr { flex-shrink: 0; }
  .historique button.seance {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--trait);
    color: var(--gris);
    font: inherit;
    font-size: 13px;
    text-align: left;
    padding: 13px 0;
    cursor: pointer;
  }
  .historique button.seance b { color: var(--blanc); font-weight: 700; }
  .historique button.seance.active b { text-decoration: underline; text-underline-offset: 3px; }

  /* --- Le minuteur --- */
  #minuteur[hidden] { display: none; }
  .minuteur {
    position: fixed;
    left: 0;
    right: 0;
    /* Juste au-dessus de la barre de navigation (63px de haut),
       jamais dessous : à bottom: 0 il disparaîtrait derrière elle. */
    bottom: calc(63px + env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border-top: 1px solid var(--trait);
    padding: 14px 18px;
  }
  .minuteur .temps {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.04em;
    min-width: 84px;
  }
  .minuteur .quoi { flex: 1; font-size: 12px; color: var(--gris); }
  .minuteur button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 13px;
    padding: 10px 13px;
    cursor: pointer;
  }
  .minuteur button.pause { padding: 10px 12px; display: flex; align-items: center; }
  .minuteur button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }
  /* Un décompte figé ne doit pas ressembler à un décompte qui tourne :
     le chiffre passe en gris, et le texte dit « En pause ». */
  .minuteur.enpause .temps { color: var(--gris); }

  .minuteur.fini { background: var(--vert); border-top-color: var(--vert); }

  /* Trois clignotements à l'arrivée. En mode silencieux — le cas normal
     dans une salle — c'est le seul signal de fin qui reste. Le bandeau
     n'est plus redessiné une fois terminé, donc l'animation ne joue
     qu'une fois, au bon moment. */
  @keyframes fin-repos {
    0%, 100% { background: var(--vert); }
    50%      { background: var(--blanc); }
  }
  .minuteur.fini { animation: fin-repos 0.4s ease-in-out 3; }
  @media (prefers-reduced-motion: reduce) {
    .minuteur.fini { animation: none; }
  }
  .minuteur.fini .temps, .minuteur.fini .quoi { color: var(--noir); }
  .minuteur.fini button { border-color: rgba(0,0,0,0.3); color: var(--noir); }
  body.minuteur-ouvert { padding-bottom: calc(200px + env(safe-area-inset-bottom)); }

  /* --- L'import --- */
  .intro-donnees { font-size: 14px; color: var(--gris); }
  .import { margin-top: 26px; border-top: 1px solid var(--trait); padding-top: 22px; }
  .import p, .archives p, .ia p { font-size: 13px; color: var(--gris); margin-top: 8px; }
  .import .exemple {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--gris);
    background: var(--surface);
    padding: 12px;
    margin-top: 14px;
    white-space: pre-line;
  }
  .destination { margin-top: 14px; }
  .destination .titre {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 8px;
  }
  .destination .rangee { display: flex; align-items: center; gap: 6px; }
  .destination .rangee button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 13px;
    padding: 9px 11px;
    cursor: pointer;
  }
  .destination .jour { flex: 1; min-width: 0; }
  .destination .onglets-mini {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 6px;
  }
  .destination .onglets-mini button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 2px;
    cursor: pointer;
  }
  .destination .onglets-mini button.actif {
    background: var(--blanc);
    border-color: var(--blanc);
    color: var(--noir);
  }

  .apercu { margin-top: 14px; }
  .apercu .item { font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
  .apercu .item b { color: var(--blanc); font-weight: 700; }
  .apercu .item span { color: var(--gris); }
  .apercu .rien { color: var(--rouge); font-size: 13px; margin-top: 14px; }
  .import .valider-import {
    width: 100%;
    margin-top: 14px;
    background: var(--blanc);
    color: var(--noir);
    border: none;
    border-radius: 2px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 15px;
    cursor: pointer;
  }

  /* --- L'IA et les archives --- */
  .ia { margin-top: 38px; border-top: 1px solid var(--trait); padding-top: 22px; }
  .ia .etat-cle { margin-top: 14px; }
  .avis-ia { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trait); }
  .avis-ia button {
    background: none;
    border: 1px dashed var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 13px;
    padding: 10px 14px;
    cursor: pointer;
  }
  .avis-ia .texte { font-size: 14px; color: var(--blanc); white-space: pre-line; }
  .avis-ia .source { font-size: 12px; color: var(--gris); margin-top: 14px; }

  .archives { margin-top: 38px; border-top: 1px solid var(--trait); padding-top: 22px; }
  /* Une légende de bas de page, pas une instruction : plus d'écart,
     centrée, plus discrète que le texte d'aide juste au-dessus. */
  .archives #version { margin-top: 26px; text-align: center; font-size: 12px; }
  textarea {
    height: 96px;
    margin-top: 14px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    padding: 12px;
    resize: vertical;
  }
  .boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .boutons button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 13px;
    padding: 13px;
    cursor: pointer;
  }

  /* --- Les sous-sections de Progression --- */
  .sous-vues {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    margin-top: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--trait);
  }
  .sous-vues button {
    background: none;
    border: none;
    border-top: 2px solid var(--trait);
    color: var(--gris);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 11px 2px 0;
    cursor: pointer;
  }
  .sous-vues button.actif { border-top-color: var(--blanc); color: var(--blanc); }

  /* La première carte d'une sous-section n'a pas besoin d'un second
     filet juste sous celui de la barre. */
  .sous-vues + .carte-graph { border-top: none; padding-top: 10px; }

  /* --- La vue Progression --- */
  .graphiques { margin-top: 24px; }
  .sous-titre-exo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 8px;
  }
  .sous-titre-exo:not(:first-child) { margin-top: 18px; }
  .choix-exo { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
  .choix-exo button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--gris);
    font: inherit;
    font-size: 12px;
    padding: 9px 12px;
    cursor: pointer;
  }
  .choix-exo button.actif { background: var(--blanc); border-color: var(--blanc); color: var(--noir); font-weight: 700; }

  /* La modale de classement d'un exercice : posée sur tout le reste,
     dans le même vocabulaire que les cartes (--surface, coins nets). */
  .fond-modale {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .modale {
    width: 100%;
    max-width: 540px;
    background: var(--surface);
    border-top: 1px solid var(--trait);
    border-radius: 2px;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  }
  .modale h3 {
    font-size: 16px;
    font-weight: 800;
  }
  .modale-record { color: var(--gris); font-size: 13px; margin-top: 6px; }
  .modale-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
    margin-top: 24px;
    margin-bottom: 8px;
  }
  .modale-choix { display: flex; flex-wrap: wrap; gap: 6px; }

  .carte-graph { border-top: 1px solid var(--trait); padding: 18px 0; }
  .carte-graph h3 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .carte-graph .sous { font-size: 12px; color: var(--gris); margin-top: 4px; }
  .carte-graph svg { width: 100%; height: auto; display: block; margin-top: 14px; }

  .resume-graph { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12px; color: var(--gris); margin-top: 14px; }
  .resume-graph b {
    color: var(--blanc);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    display: block;
    margin-bottom: 2px;
  }

  .legende { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
  .legende span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris); }
  .legende i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

  .ecarts { margin-top: 14px; }
  .ligne-ecart {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--trait);
    font-size: 13px;
  }
  .ligne-ecart .nom-mesure { display: flex; align-items: center; gap: 7px; color: var(--gris); }
  .ligne-ecart .nom-mesure i { width: 8px; height: 8px; border-radius: 50%; }
  .ligne-ecart .valeur-mesure { font-size: 16px; font-weight: 700; text-align: right; }
  .ligne-ecart .variation { font-size: 12px; color: var(--gris); grid-column: 1 / -1; }
  .ligne-ecart .variation.hausse { color: var(--vert); }
  .ligne-ecart .variation.baisse { color: var(--ambre); }

  /* La date du relevé */
  .barre-releve { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
  .barre-releve button {
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 13px;
    padding: 9px 12px;
    cursor: pointer;
  }
  .barre-releve .jour-releve { flex: 1; font-size: 14px; font-weight: 600; }
  .barre-releve .retour-jour { font-size: 12px; color: var(--blanc); border-color: var(--blanc); }

  /* La liste des relevés passés */
  .liste-releves { margin-top: 24px; }
  .ligne-releve { display: flex; align-items: center; gap: 8px; }
  .ligne-releve .ouvrir-releve {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--trait);
    color: var(--gris);
    font: inherit;
    font-size: 13px;
    text-align: left;
    padding: 11px 0;
    cursor: pointer;
  }
  .ligne-releve .ouvrir-releve b { color: var(--blanc); font-weight: 700; }
  /* La ligne dépliée se signale par un repère à gauche, pas par une
     couleur — l'ambre reste réservé à la progression vers un objectif. */
  .ligne-releve.actif .ouvrir-releve { border-left: 2px solid var(--blanc); padding-left: 8px; }

  /* Le contrôle de cohérence des calories */
  .activite { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--trait); }
  .controle { font-size: 12px; color: var(--gris); margin-top: 14px; }
  .controle.alerte-controle {
    color: var(--ambre);
    border-left: 2px solid var(--ambre);
    padding-left: 10px;
  }

  .grille-releve {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }
  .grille-releve label { font-size: 11px; margin-bottom: 4px; }
  .grille-releve input {
    padding: 10px 6px;
    font-size: 16px;
    text-align: center;
    background: var(--noir);
  }
  .valider-releve {
    width: 100%;
    margin-top: 14px;
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    color: var(--blanc);
    font: inherit;
    font-size: 13px;
    padding: 12px;
    cursor: pointer;
  }

  .objectif-poids { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .saisie-pesee { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
  .saisie-pesee input { width: 92px; padding: 11px 6px; font-size: 16px; text-align: center; }