/* Weeks · feuille de style de l'app. Reprend la maquette Proto/tableau-de-bord.html
   au pixel ; polices locales (S14), aucun style inline (S9). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 800; font-stretch: 62% 125%; font-display: swap; src: url("polices/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("polices/jetbrains-mono-latin.woff2") format("woff2"); }

/* ─────────────────────────────────────────────────────────────────────────
   Weeks · identité
   Téléphone d'abord : des cartes autonomes, les kilos en premier. Bureau :
   une planche d'instruments unique, découpée par des traits d'un pixel.
   Papier gris froid, encre, et la couleur réservée aux données. Archivo
   pour les titres, les grands chiffres et les libellés ; JetBrains Mono
   seulement là où des chiffres s'alignent en colonne.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --papier:    #f4f3ee;
  --papier-2:  #ebe9e2;
  --trait:     #d8d5cb;
  --trait-2:   #c4c1b6;
  --encre:     #15171c;
  --encre-2:   #5c5f67;
  --encre-3:   #9b9da4;

  /* Données · les zones du jour, nommées par ce qu'elles désignent */
  --zone-basse:    #a8392a;   /* Loin · sous 40 % */
  --zone-moyenne:  #c98b1c;   /* En route · 40 à 79 % */
  --zone-haute:    #0f9d8c;   /* Presque · 80 à 99 % */
  --zone-atteinte: #1f3fe0;   /* Réussi · 100 % et plus, et tout ce qu'on perd */
  --bleu-clair:    #c9d2ff;   /* sous-libellés sur le bloc bleu */
  --brique-claire: #f3cfc9;   /* sous-libellés sur le bloc brique */
  --sortie: cubic-bezier(.2, .8, .2, 1);   /* ce qui arrive décélère */
  --entree: cubic-bezier(.4, 0, 1, 1);     /* ce qui part accélère */
  --rebond: cubic-bezier(.34, 1.56, .64, 1);

  /* Données · la nuit, un seul bleu en trois pas, et un gris pour l'éveil */
  --nuit-profond:   #22347a;
  --nuit-leger:     #5064bd;
  --nuit-paradoxal: #8d9dd8;
  --nuit-eveil:     #cfccc2;

  /* Données · les postes du mangé, une rampe d'encre et la brique pour l'alcool */
  --poste-petit-dej:  #15171c;
  --poste-midi:       #5c5f67;
  --poste-soir:       #9b9da4;
  --poste-grignotage: #cfd0d4;
  --poste-alcool:     var(--zone-basse);

  /* Données · les sports, à l'encre, quatre gris (mêmes pas que les postes) */
  --sport-velo:   #15171c;
  --sport-course: #5c5f67;
  --sport-muscu:  #9b9da4;
  --sport-squash: #cfd0d4;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r: 8px;   /* un seul rayon pour toute boîte ; barres et carrés de données à angles vifs */
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papier); color: var(--encre); }
body {
  font: 400 15px/1.5 var(--display);
  -webkit-font-smoothing: antialiased;
  padding-block: 16px 96px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3, p { margin: 0; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── Typographie ────────────────────────────────────────────────────────── */
.libelle { font: 500 12px/1.3 var(--display); color: var(--encre-2); }
.libelle b { color: var(--encre); font-weight: 600; }
.libelle small { color: var(--encre-3); font-size: 11px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chiffre { font-family: var(--display); font-weight: 800; font-stretch: 76%; letter-spacing: -.04em; line-height: .88; font-variant-numeric: tabular-nums; }
.chiffre .unite { font-size: .42em; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--encre-2); margin-left: .12em; }
.chiffre.neg { color: var(--zone-basse); }
.perd { color: var(--zone-atteinte); }
.masse { font-variant-numeric: tabular-nums; }
small.kcal { font: 500 12px/1.3 var(--display); color: var(--encre-2); margin-left: 6px; white-space: nowrap; }
.composant .masse, .poste .nom .masse, .seance-ligne .k .masse, .bilan .masse { color: var(--encre); }
.jr-sans:not(.actif) svg { display: none; }
.jr-verres.vide { color: var(--encre-3); }
.anneau .centre .sous-kcal { font: 500 13px/1.3 var(--display); color: var(--encre-2); }
.poste .nom .masse { display: inline-block; margin-left: 6px; font: 600 13px/1.3 var(--display); }
.seance-ligne .k { display: inline-flex; align-items: baseline; gap: 6px; }
.seance-ligne .k .masse { font: 600 13px/1.3 var(--display); }
.seance-ligne .k small.kcal { margin: 0; font-family: var(--mono); font-size: 11px; }
.prend { color: var(--zone-basse); }
.gris { color: var(--encre-3); }
.doux { color: var(--encre-2); }
.petit { font-size: 13px; }
.titre-section { font: 700 26px/1.1 var(--display); font-stretch: 82%; letter-spacing: -.035em; }
.deux-pt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* ── En-tête : le prénom, la date, le jour, la montre ──────────────────── */
.entete { max-width: 1376px; margin: 0 auto 12px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.entete h1 { font: 800 44px/.95 var(--display); font-stretch: 76%; letter-spacing: -.045em; }
.entete h1 small { display: block; font: 500 13px/1.4 var(--display); color: var(--encre-2); margin-top: 6px; letter-spacing: 0; }
.entete .etat { display: grid; gap: 2px; text-align: right; }
.entete .etat .libelle { white-space: nowrap; }

/* ── La bande des kilos · le cœur de la page ────────────────────────────── */
.bande-kilos { max-width: 1376px; margin: 0 auto 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
.bande-kilos > div { background: var(--papier); padding: 14px 16px 16px; display: grid; gap: 6px; min-width: 0; align-content: start; }
.bande-kilos .total { grid-column: 1 / -1; background: var(--zone-atteinte); color: var(--papier); min-height: 128px; padding: 18px 20px 20px; gap: 8px; align-content: space-between; transition: opacity .3s var(--sortie), transform .3s var(--sortie), background .3s; }
.bande-kilos .total.prise { background: var(--zone-basse); }
.bande-kilos .total .libelle, .bande-kilos .total .paire .sous { color: var(--bleu-clair); }
.bande-kilos .total.prise .libelle, .bande-kilos .total.prise .paire .sous { color: var(--brique-claire); }
.bande-kilos .total .paire .chiffre, .bande-kilos .total .chiffre .unite { color: var(--papier); }
.bande-kilos .total.entree { opacity: 0; transform: translateY(8px); }
.debut-bouton { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0 -6px -8px; padding: 0 8px; border-radius: var(--r); cursor: pointer; justify-self: start; }
.debut-bouton .libelle { border-bottom: 1px dotted currentColor; line-height: 1.6; }
.debut-bouton svg { width: 12px; height: 12px; stroke: var(--bleu-clair); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.total.prise .debut-bouton svg { stroke: var(--brique-claire); }
.debut-bouton:hover { background: rgba(244, 243, 238, .12); }
.debut-bouton input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.debut-bouton:focus-within { outline: 2px solid var(--papier); outline-offset: 2px; }
.bande-kilos .paire { display: flex; gap: 20px 28px; flex-wrap: wrap; align-items: end; }
.bande-kilos .paire > div { display: grid; gap: 4px; }
.bande-kilos .paire .chiffre { font-size: 56px; white-space: nowrap; }
.bande-kilos .paire .sous { font: 500 12px/1.3 var(--display); color: var(--encre-2); }
.bande-kilos .petit-chiffre { font-size: 36px; white-space: nowrap; }
@media (min-width: 720px) {
  .bande-kilos { margin-bottom: 16px; grid-template-columns: 2fr 1fr 1fr 1fr; }
  .bande-kilos > div { padding: 16px 24px 18px; }
  .bande-kilos .total { grid-column: 1; }
}

/* ── La planche (bureau) et les cartes (téléphone) ─────────────────────── */
.planche { max-width: 1376px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: 1fr; grid-template-areas: "jour" "poids" "sem" "nuit" "alcool" "sport"; }
.panneau { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r); padding: 24px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.panneau > header { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.panneau > header .titre-section { grid-column: 1; grid-row: 1; }
.panneau > header .libelle { grid-column: 1; grid-row: 2; font-size: 11px; color: var(--encre-3); }
.panneau > header .voir-plus { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
#jour { grid-area: jour; } #poids { grid-area: poids; } #nuit { grid-area: nuit; }
#alcool { grid-area: alcool; } #sport { grid-area: sport; } #semaines { grid-area: sem; }
.panneau.second { gap: 14px; }
.second .titre-section { font-size: 20px; }
.second .libelle { font-size: 11px; }

@media (min-width: 720px) {
  .planche { gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; grid-template-columns: 1fr 1fr; grid-template-areas: "jour jour" "poids poids" "sem sem" "nuit alcool" "sport sport"; }
  .panneau { border: 0; border-radius: 0; padding: 28px 28px 32px; gap: 20px; }
  .panneau.second { padding: 18px 24px 22px; gap: 14px; }
  .panneau > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
  .panneau > header .titre-section { flex: 1 1 auto; }
  .panneau > header .libelle { font-size: 12px; color: var(--encre-2); }
  .second > header .libelle { font-size: 11px; }
}
@media (min-width: 1180px) {
  body { padding-block: 24px 40px; }
  .planche {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "jour jour jour jour jour jour jour poids poids poids poids poids"
      "sem sem sem sem sem sem sem sem sem sem sem sem"
      "nuit nuit nuit nuit alcool alcool alcool alcool sport sport sport sport";
  }
  .panneau { padding: 32px; }
  .panneau.second { padding: 20px 24px 24px; }
}

/* ── Aujourd'hui ────────────────────────────────────────────────────────── */
#jour > header { grid-template-columns: 1fr; }
.nav-jour { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.nav-jour .titre-section { flex: 1 1 auto; min-width: 0; text-align: center; }
@media (min-width: 720px) { .nav-jour { flex: 1 1 auto; justify-content: flex-start; } .nav-jour .titre-section { flex: 0 1 auto; text-align: left; } }
.fleche-jour { width: 44px; height: 44px; flex: none; border: 1px solid var(--trait-2); border-radius: var(--r); background: transparent; display: grid; place-items: center; }
.fleche-jour svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fleche-jour:hover:not(:disabled) { background: var(--papier-2); }
.fleche-jour:disabled { opacity: .3; cursor: default; }
.jour-corps { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .jour-corps { grid-template-columns: minmax(240px, 300px) 1fr; gap: 36px; align-items: start; } }
.anneau { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto; }
.anneau svg { width: 100%; height: 100%; display: block; }
.anneau .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 17%; }
.anneau .centre .chiffre { font-size: clamp(72px, 24vw, 92px); }
.anneau .centre .kilos { font: 700 20px/1 var(--display); font-stretch: 82%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zone-pastille { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--display); padding: 7px 10px; border: 1px solid var(--trait); border-radius: var(--r); background: var(--papier); white-space: nowrap; }
.zone-pastille i, .legende i { width: 10px; height: 10px; flex: none; display: inline-block; }
.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 500 12px/1.3 var(--display); color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.bilan { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bilan > div { display: grid; gap: 4px; align-content: start; }
.bilan .chiffre { font-size: 30px; }
.bilan .chiffre small.kcal { display: block; margin: 4px 0 0; font-size: 12px; letter-spacing: 0; font-stretch: 100%; font-weight: 500; }
.bilan .petit { font-size: 12px; }
@media (min-width: 720px) { .bilan { gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; } .bilan > div { background: var(--papier); padding: 12px 14px; } }
.bilan--trois { grid-template-columns: 1fr; }
@media (min-width: 720px) { .bilan--trois { grid-template-columns: repeat(3, 1fr); } }
.bilan--trois .chiffre { font-size: 34px; }
.postes { display: grid; border-top: 1px solid var(--trait); }
.poste { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.poste .nom { font: 500 12px/1.3 var(--display); color: var(--encre-2); min-width: 0; }
.poste .nom small { display: block; font: 400 13px/1.3 var(--display); color: var(--encre); }
.poste .saisie { display: inline-flex; align-items: center; gap: 6px; }
.poste input { width: 88px; height: 44px; padding: 0 10px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font: 600 18px/1 var(--display); font-stretch: 85%; text-align: right; color: var(--encre); font-variant-numeric: tabular-nums; }
.poste input::placeholder { color: var(--encre-3); font-weight: 500; }
.poste .saisie span { font: 500 12px var(--display); color: var(--encre-2); }
.poste .camera { width: 44px; height: 44px; border: 1px solid var(--trait-2); border-radius: var(--r); background: transparent; display: grid; place-items: center; }
.poste .camera svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.poste .camera:hover { background: var(--papier-2); }
.poste .verres-jour { font: 600 18px/1 var(--display); font-stretch: 85%; font-variant-numeric: tabular-nums; grid-column: 2 / -1; justify-self: end; }
.poste .verres-jour small { font: 500 12px var(--display); color: var(--encre-2); margin-left: 4px; }
.poste .alcool-commandes { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.poste .alcool-commandes .bouton, .poste .alcool-commandes .compteur { flex: none; white-space: nowrap; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* La barre Annuler / Valider : en ligne au bureau, fixe en bas sur téléphone */
.barre-valider { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 719px) {
  .barre-valider { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--papier); border-top: 1px solid var(--trait); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .barre-valider .bouton { flex: 1 1 0; justify-content: center; }
}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.bouton { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r); border: 1px solid var(--encre); background: var(--encre); color: var(--papier); font: 600 14px/1 var(--display); letter-spacing: -.01em; min-height: 44px; }
.bouton svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bouton--creux { background: transparent; color: var(--encre); border-color: var(--trait-2); }
.bouton--creux.actif { background: var(--papier-2); border-color: var(--encre); }
.bouton--petit { padding: 8px 12px; min-height: 36px; font-size: 13px; }
.bouton--large { width: 100%; justify-content: center; }
.bouton:active { transform: translateY(1px); }
.compteur { display: inline-flex; align-items: center; border: 1px solid var(--trait-2); border-radius: var(--r); min-height: 44px; overflow: hidden; }
.compteur button { width: 44px; min-height: 44px; border: 0; background: transparent; font: 500 18px/1 var(--mono); }
.compteur button:hover { background: var(--papier-2); }
.compteur output { width: 80px; text-align: center; font: 500 13px/1 var(--display); border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); align-self: stretch; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.fleches { display: inline-flex; gap: 6px; }
.fleches button { width: 36px; height: 36px; border: 1px solid var(--trait-2); border-radius: var(--r); background: transparent; display: grid; place-items: center; }
.fleches button:hover { background: var(--papier-2); }
.fleches svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Poids (premier plan) ──────────────────────────────────────────────── */
.poids-tete { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: end; }
.poids-tete .chiffre { font-size: 84px; }
.poids-tete .deltas { font: 500 13px/1.4 var(--display); color: var(--encre-2); }
.poids-tete .deltas b { color: var(--encre); font-weight: 600; }
.graphe { position: relative; width: 100%; }
.graphe svg { display: block; width: 100%; height: 220px; overflow: visible; }
@media (min-width: 1180px) { .graphe svg { height: 280px; } }
.graphe .axe, .graphes .axe, .graphe-kilos .axe { font: 500 10px var(--mono); fill: var(--encre-2); }
.graphe .halo, .graphe-kilos .halo { paint-order: stroke; stroke: var(--papier); stroke-width: 3px; stroke-linejoin: round; }
.graphe .grille, .graphes .grille { stroke: var(--trait); stroke-width: 1; }
.graphe .ligne { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe .projection { fill: none; stroke: var(--encre-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.graphe .objectif { stroke: var(--zone-atteinte); stroke-width: 1; transition: stroke-width .3s var(--sortie); }
.graphe .objectif-txt { font: 500 10px var(--mono); fill: var(--zone-atteinte); }
.graphe .objectif.atteint { stroke-width: 2; }
.graphe-kilos .avant { fill: var(--encre-3); }
.graphe .point.dernier { fill: var(--encre); }
.graphe .survol { fill: transparent; }
.infobulle { position: absolute; pointer-events: none; background: var(--encre); color: var(--papier); font: 500 11px/1.4 var(--mono); padding: 6px 9px; border-radius: var(--r); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s; }
.infobulle.visible { opacity: 1; }

/* ── Nuit (second plan) ─────────────────────────────────────────────────── */
.nuit-tete { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: end; }
.nuit-tete .chiffre { font-size: 44px; }
.nuit-tete .score { display: grid; gap: 3px; justify-items: start; }
.nuit-tete .score .chiffre { font-size: 28px; }
.heure { font: 500 12px/1.3 var(--mono); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.mesures { display: grid; border-top: 1px solid var(--trait); }
.mesure { display: grid; grid-template-columns: minmax(96px, 1fr) auto minmax(90px, 140px) auto; gap: 8px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.mesure > * { min-width: 0; }
.mesure .nom { font: 500 12px/1.3 var(--display); color: var(--encre-2); }
.mesure .val { text-align: right; font: 700 22px/1 var(--display); font-stretch: 82%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.etincelle svg { width: 100%; min-width: 0; height: 28px; display: block; overflow: visible; }
.mesure .delta { font: 500 11px/1 var(--mono); color: var(--encre-2); white-space: nowrap; }
.mesure .delta.mieux { color: var(--zone-atteinte); }
.mesure .delta.pire { color: var(--zone-basse); }

/* ── Alcool (second plan) ───────────────────────────────────────────────── */
.alcool-corps { display: grid; grid-template-columns: auto 1fr; gap: 16px 28px; align-items: end; }
.alcool-corps .chiffre { font-size: 44px; }
.alcool-corps > div:first-child .libelle { white-space: nowrap; }
.verres { display: grid; gap: 10px; }
.verres .ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; font: 500 12px/1.3 var(--display); color: var(--encre-2); }
.verres .ligne .b { grid-column: 1 / -1; height: 8px; background: var(--encre-3); }
.verres .ligne.cette .b { background: var(--encre); }
.verres .ligne b { font: 700 20px/1 var(--display); font-stretch: 82%; letter-spacing: -.02em; color: var(--encre); font-variant-numeric: tabular-nums; }
.verres .ligne b small { font: 500 12px var(--display); color: var(--encre-2); margin-left: 4px; letter-spacing: 0; }
@media (max-width: 559px) { .alcool-corps { grid-template-columns: 1fr; } }

/* ── Séances (second plan) ──────────────────────────────────────────────── */
.sport-tete { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: end; }
@media (max-width: 559px) { .sport-tete { grid-template-columns: 1fr; } }
.sport-tete .chiffre { font-size: 44px; }
.objectif { display: grid; gap: 6px; align-self: end; }
.objectif .barre { position: relative; height: 8px; background: var(--papier-2); margin-bottom: 6px; }
.objectif .barre i { position: absolute; inset: 0 auto 0 0; background: var(--encre); max-width: 100%; }
.objectif .barre em { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--encre); }
.seances { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.seances li { border-bottom: 1px solid var(--trait); }
.seance-ligne { display: grid; grid-template-columns: 52px 1fr auto auto 18px; gap: 10px; align-items: baseline; width: 100%; min-height: 44px; padding: 8px 0; border: 0; background: none; text-align: left; font-size: 14px; color: var(--encre); border-radius: var(--r); }
.seance-ligne:hover { background: var(--papier-2); }
.seance-ligne .q { font: 500 11px/1.3 var(--mono); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.seance-ligne .t { display: inline-flex; align-items: center; gap: 8px; }
.seance-ligne .t i { width: 10px; height: 10px; flex: none; }
.seance-ligne .d, .seance-ligne .k { font: 500 12px/1.3 var(--mono); color: var(--encre-2); font-variant-numeric: tabular-nums; text-align: right; }
.seance-ligne .k { color: var(--encre); }
.seance-ligne .chevron { width: 14px; height: 14px; align-self: center; justify-self: end; stroke: var(--encre-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.seance-ligne[aria-expanded="true"] .chevron { transform: rotate(180deg); stroke: var(--encre); }
.seance-detail { display: grid; gap: 12px; padding: 2px 0 14px; }
.seance-detail .contexte { font-size: 13px; color: var(--encre-2); }
.seance-detail .contexte b { color: var(--encre); font-weight: 600; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; margin: 0; padding: 1px; }
.tuiles > div { background: var(--papier); outline: 1px solid var(--trait); padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.tuiles dt { font: 500 11px/1.3 var(--display); color: var(--encre-2); }
.tuiles dd { margin: 0; font: 700 18px/1 var(--display); font-stretch: 82%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tuiles dd small { font: 500 11px var(--display); color: var(--encre-2); letter-spacing: 0; margin-left: 3px; }
@media (min-width: 720px) { .seance-detail { padding-left: 62px; } }
.seances--detail .seance-ligne { grid-template-columns: 104px 1fr auto auto 18px; }
@media (max-width: 559px) { .seances--detail .seance-ligne { grid-template-columns: 92px 1fr auto auto 18px; gap: 8px; } }
@media (min-width: 720px) { .seances--detail .seance-detail { padding-left: 114px; } }
.sports-tableau td:first-child span { display: inline-flex; align-items: center; gap: 8px; }
.sports-tableau td:first-child i { width: 10px; height: 10px; display: inline-block; }

/* ── Les semaines ───────────────────────────────────────────────────────── */
#semaines > header { align-items: center; }
.semaines { display: grid; gap: 12px; }
.sem { border: 1px solid var(--trait); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; background: var(--papier); min-width: 0; }
.sem.courante { border-color: var(--encre); }
.sem-tete { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; }
.sem-nom { font: 600 13px/1.2 var(--display); letter-spacing: -.01em; }
.sem-stats { font: 500 12px/1.3 var(--display); color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.sem-stats b { color: var(--encre); font-weight: 600; }
.sem-stats .etat-sem { font-weight: 600; }
.sem-stats .etat-sem.reussie { color: var(--zone-atteinte); }
.sem-stats .etat-sem.ratee { color: var(--zone-basse); }
.sem-stats .etat-sem.incomplete, .sem-stats .etat-sem.cours { color: var(--encre-3); }
.sem-stats .jours-reussis { margin-left: 6px; font-size: 11px; color: var(--encre-3); }
@media (max-width: 719px) { .sem-stats .jours-reussis { display: none; } }
.sem-stats .verre { width: 12px; height: 12px; margin-left: 6px; stroke: var(--encre-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sem-tete .sem-kg { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 800 26px/1 var(--display); font-stretch: 76%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sem-cases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.case { position: relative; aspect-ratio: 1; border-radius: var(--r); border: 1px solid var(--trait); background: var(--papier); display: grid; place-items: center; font: 500 12px/1 var(--mono); color: var(--encre-2); font-variant-numeric: tabular-nums; min-width: 0; }
.case.zone { color: #fff; border-color: transparent; }
.case.aujourdhui { outline: 2px solid var(--encre); outline-offset: 1px; color: var(--encre); font-weight: 600; }
.case.aujourdhui.zone { color: #fff; }
.case.futur { border-style: dashed; color: var(--encre-3); }
.case.vide { background: var(--papier-2); border-color: var(--trait-2); color: var(--encre-3); }
button.case { cursor: pointer; padding: 0; transition: transform .08s; }
button.case:hover { outline: 1px solid var(--encre-2); outline-offset: 1px; }
button.case:active { transform: scale(.9); }
button.case:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.case .sans { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.sem-lourd { font-size: 13px; color: var(--encre-2); line-height: 1.35; }
.sem-lourd b { color: var(--encre); font-weight: 600; }
.sem-lourd.alcool b { color: var(--zone-basse); }
.sem-barre { display: flex; height: 18px; gap: 2px; overflow: hidden; }
.sem-barre i { display: block; height: 100%; font: 500 10px/18px var(--mono); text-align: center; overflow: hidden; white-space: nowrap; color: var(--papier); font-style: normal; }
.sem-barre i.clair { color: var(--encre); }
.semaines-plus { margin-top: 2px; }
@media (min-width: 720px) {
  .semaines { display: flex; flex-direction: row-reverse; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--trait-2) transparent; }
  .sem { flex: 0 0 268px; scroll-snap-align: end; }
  .sem-cases { gap: 3px; }
  .case { font-size: 11px; }
  .semaines-plus { display: none; }
}
@media (max-width: 719px) { .fleches { display: none; } }

/* ── Voir plus : un bloc qui s'ouvre le dit au repos ─────────────────────── */
.voir-plus { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--trait-2); border-radius: var(--r); background: transparent; font: 600 12px/1 var(--display); color: var(--encre); white-space: nowrap; }
.voir-plus svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voir-plus:hover { background: var(--papier-2); }
@media (max-width: 719px) { .voir-plus { min-height: 44px; padding: 8px 14px; } }

/* ── Panneau de détail · patron commun ──────────────────────────────────── */
.feuille.feuille--detail { max-width: 880px; gap: 22px; }
@media (max-width: 719px) { .voile--detail { align-items: stretch; } .voile--detail .feuille { max-width: none; height: 100%; max-height: none; border-radius: 0; padding-top: calc(12px + env(safe-area-inset-top, 0px)); } }
.detail-tete { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.detail-tete .titre-section { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-tete .libelle { grid-column: 2; grid-row: 2; }
.detail-tete .bouton { grid-row: 1 / span 2; align-self: center; }
@media (min-width: 720px) { .detail-tete { display: flex; } .detail-tete .titre-section { flex: 1; } .detail-tete .libelle { margin-left: auto; } }
.detail-tete .mobile { display: none; }
@media (max-width: 719px) { .detail-tete .mobile { display: inline; } .detail-tete .bureau { display: none; } }
.detail-section { display: grid; gap: 12px; }
.detail-section + .detail-section { border-top: 1px solid var(--trait); padding-top: 18px; }
.phases { display: grid; gap: 10px; }
.phases .barre { display: flex; height: 22px; gap: 2px; overflow: hidden; }
.phases .barre i { display: block; height: 100%; }
.phases .detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.phases .detail div { display: grid; gap: 2px; font: 500 12px/1.3 var(--display); color: var(--encre-2); }
.phases .detail div::before { content: ""; width: 14px; height: 3px; background: var(--c); margin-bottom: 3px; }
.phases .detail b { font: 600 16px/1.1 var(--display); font-stretch: 90%; color: var(--encre); font-variant-numeric: tabular-nums; }
.phases .detail small { font-size: 11px; color: var(--encre-3); }
@media (max-width: 559px) { .phases .detail { grid-template-columns: repeat(2, 1fr); } }
.graphes { display: grid; grid-template-columns: 1fr; gap: 18px 28px; }
@media (min-width: 720px) { .graphes { grid-template-columns: 1fr 1fr; } }
.graphes figure { margin: 0; display: grid; gap: 6px; min-width: 0; }
.graphes figcaption { font: 500 12px/1.3 var(--display); color: var(--encre-2); }
.graphes svg { display: block; width: 100%; height: 120px; overflow: visible; }
.graphes .barre-n { fill: var(--encre-3); }
.graphes .barre-n.derniere { fill: var(--encre); }
.graphes .courbe { fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linejoin: round; }
.graphes .pt { fill: var(--papier); stroke: var(--encre); stroke-width: 1.4; }
.graphes .pt.dernier { fill: var(--encre); }
.graphe-kilos svg { display: block; width: 100%; height: 180px; overflow: visible; }
.graphe-kilos .perd-b { fill: var(--zone-atteinte); }
.graphe-kilos .prend-b { fill: var(--zone-basse); }
.graphe-kilos .courante-b { fill: var(--encre); }
.liste-kilos { display: grid; }
.liste-kilos .ligne { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.liste-kilos .ligne .nom { font: 500 13px/1.3 var(--display); }
.liste-kilos .ligne.avant, .liste-kilos .ligne.avant .kg b, .liste-kilos .ligne.avant .kg span, .liste-kilos .ligne.avant .kg small { color: var(--encre-3); }
.liste-kilos .ligne .nom small { display: block; font: 500 11px/1.3 var(--display); color: var(--encre-3); }
.liste-kilos .ligne .kg { display: grid; gap: 2px; text-align: right; }
.liste-kilos .ligne .kg b { font: 700 20px/1 var(--display); font-stretch: 82%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.liste-kilos .ligne .kg b small, .liste-kilos .ligne .kg span small { font: 500 12px var(--display); color: var(--encre-2); margin-left: 5px; letter-spacing: 0; font-stretch: 100%; }
.liste-kilos .ligne .kg span { font: 500 12px/1.3 var(--display); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.liste-kilos .ligne.total { border-top: 2px solid var(--encre); border-bottom: 0; }
.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font: 500 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.tableau th { text-align: right; font: 500 11px/1.3 var(--display); color: var(--encre-2); padding: 6px 8px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau th:first-child, .tableau td:first-child { text-align: left; padding-left: 0; }
.tableau td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
@media (max-width: 559px) { .tableau td, .tableau th { padding-left: 4px; padding-right: 4px; } .tableau table { font-size: 11px; } }
.tableau td:last-child, .tableau th:last-child { padding-right: 0; }
.tableau td:first-child { white-space: normal; }
.tableau tr.hier td { font-weight: 600; }
.etat-pastille { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--display); }
.etat-pastille i { width: 10px; height: 10px; display: inline-block; border: 1px solid transparent; }
.etat-pastille i.vide { border-color: var(--trait-2); }

/* ── Navigation basse ───────────────────────────────────────────────────── */
.nav-basse { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--papier); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav-basse a { position: relative; display: grid; justify-items: center; gap: 5px; padding: 10px 4px; text-decoration: none; color: var(--encre-2); font: 500 11px/1 var(--display); min-height: 56px; align-content: center; }
.nav-basse a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-basse a.actif { color: var(--encre); }
.nav-basse a.actif::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); height: 2px; width: 44px; background: var(--encre); }
@media (min-width: 720px) { .nav-basse { display: none; } }

/* ── Feuille photo ──────────────────────────────────────────────────────── */
.voile { position: fixed; inset: 0; background: rgba(21, 23, 28, .45); z-index: 30; display: none; align-items: flex-end; justify-content: center; }
.voile.voile--photo { z-index: 36; }
.feuille { background: var(--papier); width: 100%; max-width: 520px; border-radius: var(--r) var(--r) 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; align-content: start; max-height: 92vh; overflow: auto; }
.feuille > *, .detail-section > *, #detail-corps { min-width: 0; }
@media (min-width: 720px) { .voile { align-items: center; padding: 24px; } .feuille { border-radius: var(--r); padding: 28px; } }
.feuille .photo { aspect-ratio: 16 / 9; background: var(--papier-2); border-radius: var(--r); display: grid; place-items: center; position: relative; overflow: hidden; }
.feuille .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feuille .photo svg { width: 38%; height: auto; stroke: var(--encre-2); fill: none; stroke-width: 1.4; stroke-linecap: round; }
.precisions { display: grid; gap: 6px; }
.precisions textarea { width: 100%; min-height: 44px; resize: none; overflow: hidden; padding: 11px 14px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font-size: 16px; line-height: 1.4; }
.precisions textarea::placeholder { color: var(--encre-3); }
.precisions .compteur-car { justify-self: end; font: 500 11px/1 var(--mono); color: var(--encre-3); font-variant-numeric: tabular-nums; }
.feuille .estimation { display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; align-items: center; }
.feuille .estimation .vignette { width: 56px; height: 56px; border-radius: var(--r); background: var(--papier-2); overflow: hidden; display: grid; place-items: center; grid-row: 1 / span 3; }
.feuille .estimation .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feuille .estimation .vignette svg { width: 70%; stroke: var(--encre-2); fill: none; stroke-width: 1.4; }
.feuille .estimation h3 { font: 600 20px/1.1 var(--display); font-stretch: 90%; letter-spacing: -.02em; }
.feuille .estimation p { font-size: 14px; color: var(--encre-2); }
.feuille .estimation p b { color: var(--encre); font-weight: 600; }
.feuille .estimation .avec { font: 500 12px/1.3 var(--display); color: var(--zone-atteinte); }
.feuille .reglage { display: grid; gap: 8px; }
.feuille .reglage .valeur { display: flex; align-items: baseline; justify-content: space-between; }
.feuille .reglage .valeur .chiffre { font-size: 44px; }
.feuille .reglage .valeur .chiffre small.kcal { font-size: 13px; letter-spacing: 0; font-stretch: 100%; font-weight: 500; margin-left: 10px; }
.feuille input[type=range] { width: 100%; accent-color: var(--encre); height: 32px; }
.feuille .bornes { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--encre-3); font-variant-numeric: tabular-nums; }
.feuille .pied { display: grid; gap: 10px; }
.toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--encre); color: var(--papier); font: 500 13px/1.3 var(--display); padding: 10px 14px; border-radius: var(--r); z-index: 40; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.visible { opacity: 1; }
@media (min-width: 720px) { .toast { bottom: 24px; } }
/* ── Mouvement : deux courbes, des durées courtes, rien qui saute ─────────── */
.anneau .arc, .anneau .sur { transition: stroke-dashoffset .3s var(--sortie), stroke .3s; }
.zone-pastille { transition: opacity .2s var(--sortie), background .2s, color .2s, border-color .2s; }
.zone-pastille.cache { opacity: 0; }
.zone-pastille.inverse { background: var(--zone-atteinte); color: var(--papier); border-color: transparent; }
.zone-pastille.inverse i { background: var(--papier) !important; }
.jour-corps { transition: transform .22s var(--sortie); }
.jour-corps.suivi { transition: none; }
@keyframes arrive-g { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes arrive-d { from { transform: translateX(-24px); opacity: .4; } to { transform: none; opacity: 1; } }
.jour-corps.arrive-g { animation: arrive-g .22s var(--sortie); }
.jour-corps.arrive-d { animation: arrive-d .22s var(--sortie); }
.case { transition: background .3s var(--sortie), transform .08s; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pulse-petit { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.case.pulse { animation: pulse .5s var(--rebond); }
.case.vague { animation: pulse-petit .3s var(--sortie) both; }
@keyframes glisse-haut { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.glisse { animation: glisse-haut .3s var(--sortie); }
.glisse-pulse { animation: glisse-haut .3s var(--sortie), pulse-petit .3s var(--sortie) .3s; }
@keyframes allume { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(2); } 100% { transform: translateX(-50%) scale(1); } }
.case .sans.allume { animation: allume .3s var(--sortie) both; }
@keyframes arrive-haut { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.sem.arrive { animation: arrive-haut .2s var(--sortie) both; }
.voile { display: flex; visibility: hidden; opacity: 0; transition: opacity .2s var(--entree), visibility 0s linear .2s; }
.voile.ouvert { visibility: visible; opacity: 1; transition: opacity .2s var(--sortie); }
.voile .feuille { transform: translateY(100%); transition: transform .2s var(--entree); }
.voile.ouvert .feuille { transform: none; transition: transform .26s var(--sortie); }
@media (min-width: 720px) {
  .voile .feuille { transform: scale(.98); opacity: 0; transition: transform .16s var(--entree), opacity .16s var(--entree); }
  .voile.ouvert .feuille { transform: none; opacity: 1; transition: transform .2s var(--sortie), opacity .2s var(--sortie); }
}
.barre-valider { display: none; }
.barre-valider.visible { display: flex; }
@media (max-width: 719px) {
  .barre-valider { display: flex; transform: translateY(100%); visibility: hidden; transition: transform .16s var(--entree), visibility 0s linear .16s; }
  .barre-valider.visible { transform: none; visibility: visible; transition: transform .2s var(--sortie); }
  .nav-basse { transition: opacity .16s var(--entree); }
  body.brouillon .nav-basse { display: grid; opacity: 0; pointer-events: none; }
}
.toast { transition: opacity .3s var(--entree); }
.toast.visible { transition: opacity .2s var(--sortie); }
.toast.bleu { background: var(--zone-atteinte); }
.bouton, .fleche-jour, .voir-plus, .camera, .compteur button { transition: transform .08s, background .08s; }
.fleche-jour:active, .voir-plus:active, .camera:active, .compteur button:active, .voir-plus:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Couleurs de données par classe, jamais par attribut style ──────────── */
.z-loin { background: var(--zone-basse); } .z-enroute { background: var(--zone-moyenne); }
.z-presque { background: var(--zone-haute); } .z-reussi { background: var(--zone-atteinte); }
.z-rien { background: var(--papier-2); border: 1px solid var(--trait-2); }
.sw-encre { background: var(--encre); } .sw-encre-3 { background: var(--encre-3); }
.sw-point { background: var(--encre); border-radius: 50%; width: 6px; height: 6px; margin: 0 2px; }
.sw-trait { background: var(--encre); width: 14px; height: 2px; }
.sw-pointille { border-top: 2px dotted var(--encre-2); height: 0; width: 16px; }
.sw-objectif { background: var(--zone-atteinte); width: 14px; height: 1px; }
.n-profond { background: var(--nuit-profond); } .n-leger { background: var(--nuit-leger); }
.n-paradoxal { background: var(--nuit-paradoxal); } .n-eveil { background: var(--nuit-eveil); }
.phases .detail div.n-profond::before { background: var(--nuit-profond); } .phases .detail div.n-leger::before { background: var(--nuit-leger); }
.phases .detail div.n-paradoxal::before { background: var(--nuit-paradoxal); } .phases .detail div.n-eveil::before { background: var(--nuit-eveil); }
.phases .detail div { background: transparent; }
.s-velo { background: var(--sport-velo); } .s-course { background: var(--sport-course); }
.s-muscu { background: var(--sport-muscu); } .s-autre { background: var(--sport-squash); }
.zone-pastille i.z-rien { border: 0; }

/* ── Écrans et navigation entre écrans ─────────────────────────────────── */
.ecran-entree { min-height: 100vh; display: grid; place-items: center; }
.entree { width: 100%; max-width: 420px; display: grid; gap: 18px; text-align: center; justify-items: center; padding: 24px 0; }
.entree-titre { font: 800 44px/.95 var(--display); font-stretch: 76%; letter-spacing: -.045em; }
.entree-code { font-size: 72px; letter-spacing: .06em; font-stretch: 90%; min-height: 64px; }
.entree-consigne { font-size: 15px; color: var(--encre-2); }
.entree-note { font: 500 12px/1.4 var(--display); color: var(--encre-3); max-width: 300px; }
.entree-amorce-lien { background: none; border: 0; font: 500 12px/1.3 var(--display); color: var(--encre-3); text-decoration: underline dotted; min-height: 44px; padding: 0 12px; }
.entree-amorce { display: flex; gap: 8px; width: 100%; }
.entree-amorce input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font: 500 16px var(--mono); letter-spacing: .04em; }
.ecran-page .page { max-width: 880px; margin: 0 auto; display: grid; gap: 22px; }
.ecran-page .detail-section { display: grid; gap: 12px; }
.ligne-reglage { display: flex; gap: 8px; align-items: center; }
.ligne-reglage input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font: 500 16px var(--display); color: var(--encre); }
.ligne-reglage input[type=date] { font-family: var(--mono); }
.montre-etat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.montre-etat .chiffre { font-size: 28px; }
.erreur { font: 500 13px/1.4 var(--display); color: var(--zone-basse); }
.reglages-bas { padding-top: 18px; border-top: 1px solid var(--trait); }
.sortir { color: var(--zone-basse); }
.prenom-bouton { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; text-align: left; border-bottom: 1px dotted var(--trait-2); }
.bandeau-hors-ligne { position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; transform: translateX(-50%); z-index: 50; background: var(--encre); color: var(--papier); font: 500 12px/1 var(--display); padding: 8px 14px; border-radius: 0 0 var(--r) var(--r); }

/* Appareils */
.appareil { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.appareil .nom { font: 600 15px/1.3 var(--display); }
.appareil .infos { font: 500 12px/1.3 var(--mono); color: var(--encre-2); }
.appareil .code { font: 800 32px/1 var(--display); font-stretch: 80%; letter-spacing: .06em; }
.demande { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.demande .ligne-reglage select { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font: 500 16px var(--display); color: var(--encre); }

/* Poids : saisie d'une pesée */
.poids-bouton { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.pesee-saisie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pesee-saisie input { width: 110px; height: 44px; padding: 0 12px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font: 600 18px/1 var(--display); font-stretch: 85%; color: var(--encre); }

/* Feuille photo : saisie manuelle en attendant l'estimation */
.manuel { display: grid; gap: 10px; }
.manuel input[type=text] { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font: 500 16px var(--display); color: var(--encre); }
.manuel .saisie { display: inline-flex; align-items: center; gap: 6px; }
.manuel .saisie input { width: 120px; height: 44px; padding: 0 10px; border: 1px solid var(--trait-2); border-radius: var(--r); background: var(--papier); font: 600 18px/1 var(--display); font-stretch: 85%; text-align: right; color: var(--encre); font-variant-numeric: tabular-nums; }
.manuel .saisie span { font: 500 12px var(--display); color: var(--encre-2); }
.feuille .estimation p { font-size: 13px; color: var(--encre-3); }
.feuille .photo svg, .feuille .vignette svg { stroke: var(--encre-2); fill: none; stroke-width: 1.4; stroke-linecap: round; }
.feuille .photo svg { width: 38%; height: auto; }
.feuille .vignette svg { width: 70%; }
.fleche-jour svg, .fleches svg, .retour svg, .voir-plus svg, .nav-basse a svg, .camera svg, .seance-ligne .chevron, .sem-stats .verre { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.entrees-jour { display: grid; gap: 4px; }
.entree-jour { display: flex; justify-content: space-between; gap: 8px; font: 400 13px/1.3 var(--display); color: var(--encre-2); }
.entree-jour button { background: none; border: 0; color: var(--encre-3); font: 500 12px var(--display); min-height: 32px; padding: 0 6px; text-decoration: underline dotted; }

/* ── Compléments de l'app ─────────────────────────────────────────────────── */
.objectif-jour { grid-column: 1; grid-row: 2; text-align: center; }
@media (min-width: 720px) { .objectif-jour { text-align: right; } }
.jour-gauche { display: grid; gap: 24px; }
.jour-droite { display: grid; gap: 14px; align-content: start; }
.grand-56 { font-size: 56px; } .grand-34 { font-size: 34px; }
.zone-pastille i.z-rien { background: var(--trait-2); }
.poste .nom small { display: block; font: 400 13px/1.3 var(--display); color: var(--encre); }
.graphe[hidden] { display: none; }
.voir-plus svg { width: 12px; height: 12px; stroke-width: 2; }
.detail-tete .retour svg { width: 16px; height: 16px; }
.sem-stats .verre { margin-left: 6px; }
.nav-basse a svg { width: 20px; height: 20px; }
.chiffre .vide, .sem-kg .vide { font-weight: 500; font-stretch: 100%; color: var(--encre-3); }
.seance-ligne .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.seance-ligne .d { white-space: nowrap; }
.poids-tete .deltas .doux { font-size: 12px; }
.chiffre .vide { font-size: .5em; vertical-align: .2em; margin-right: .1em; }
.montre-etat .libelle { margin-left: 4px; }
.anneau .centre .chiffre { white-space: nowrap; font-size: clamp(64px, 20vw, 84px); }
.demande .ligne-reglage { flex-wrap: wrap; }
.demande .ligne-reglage select, .demande .ligne-reglage input { flex: 1 1 140px; }
.demande .ligne-reglage .bouton { flex: 0 0 auto; }
.liste-kilos .kg b .vide, .liste-kilos .kg span .vide { font-size: .7em; font-weight: 500; color: var(--encre-3); }