/* 04/10 — NUTRITION · CRISTAL / GLACE + ± DANS LE CARRÉ DE L'EAU + CHAMPS MACROS LISIBLES + ORDRE DES PASTILLES (ordres d'Alexandre, appels du 04/10 15h13 à 15h16).
 * Fichier AJOUTÉ, chargé en dernier : aucune règle existante n'est réécrite ni supprimée (CONSIGNE N°1). Tout est préfixé « .tr-nutri » :
 * l'écran Nutrition seulement — le thème du Livre (#/nutrition/livre, ui/livre) et la vue de Tonio ne sont PAS touchés.
 * Charte noir et or conservée ; contraste AA gardé (texte clair sur verre sombre, ≥ 7:1) ; sans backdrop-filter → fond plein sombre (repli) ;
 * contraste renforcé / couleurs forcées → les règles de skin-boutons-verre.css reprennent la main (on ne les recouvre pas). */

/* ── 0. Le verre sombre (variables locales) ─────────────────────────────────────── */
.tr-nutri {
  --cr-verre: rgba(22, 21, 25, .72);
  --cr-verre-plein: #1b1a1e;                      /* repli sans flou */
  --cr-reflet: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 34%, rgba(255, 255, 255, 0) 62%);
  --cr-lisere: rgba(255, 233, 184, .26);          /* liseré clair fin, teinté or */
  --cr-ombre: 0 10px 22px -12px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .35);
}

/* ── 1. Petits carrés sombres : repères (4 cartes), cartes de la chronologie, plan, champs ── */
.tr-nutri .nf-mc, .tr-nutri .nf-cd:not(.nf-edit), .tr-nutri .tr-plan, .tr-nutri .tr-macros {
  background: var(--cr-reflet), var(--cr-verre-plein);
  border: 1px solid var(--cr-lisere);
  box-shadow: var(--cr-ombre);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tr-nutri .nf-mc, .tr-nutri .tr-plan, .tr-nutri .tr-macros {
    background: var(--cr-reflet), var(--cr-verre);
    -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  }
}
.tr-nutri .nf-bar { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45); }

/* ── 2. La date et l'heure : la puce « DIM 4 OCT » et le titre « Dim. 4 octobre · 15:17 » ── */
.tr-nutri .tr-ndate-puce {
  background: var(--cr-reflet), var(--cr-verre-plein);
  border: 1px solid rgba(255, 233, 184, .5);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .4);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tr-nutri .tr-ndate-puce { background: var(--cr-reflet), rgba(14, 14, 17, .62); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
}
.tr-nutri .nf-tl-t {
  padding: 4px 12px; border-radius: 14px;
  background: var(--cr-reflet), var(--cr-verre-plein);
  border: 1px solid var(--cr-lisere);
  box-shadow: var(--cr-ombre);
}
.tr-nutri .nf-h { text-shadow: 0 0 10px rgba(255, 199, 102, .35); }
.tr-nutri .nf-h-eau { text-shadow: 0 0 10px rgba(79, 195, 247, .35); }

/* ── 4. Les champs macros (glucides · lipides · protéines · calories) : plus de carré jaune, le curseur seul — version NEUTRE minimale ── */
/* Cause : l'anneau or de 2 px était posé sur l'<input> lui-même (44 px de large dans une grille de 4 colonnes à 390 px), avec la sélection bleue/jaune du texte au focus ;
   « Protéines » (12 px) dépassait sa colonne : mot rogné, « g » poussé hors du cadre. Ici : ni anneau, ni fond, ni sélection ; étiquettes entières ; grille 2 × 2 sous 430 px.
   Le focus reste perceptible par un liseré NEUTRE (blanc translucide) sur le bord extérieur de la case — jamais sur le texte. Les effets (focus sombre, verre, or) attendent le choix d'Alexandre. */
.tr-nutri .nf-f input, .tr-nutri .nf-f input:focus, .tr-nutri .nf-f input:focus-visible, .tr-nutri .nf-f input:active {
  outline: none !important; box-shadow: none !important; background-color: transparent !important; caret-color: #fff;
}
.tr-nutri .nf-f input::selection { background: transparent; color: inherit; -webkit-text-fill-color: currentColor; }
.tr-nutri .nf-f input::-moz-selection { background: transparent; color: inherit; }
.tr-nutri .nf-f input:-webkit-autofill, .tr-nutri .nf-f input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0f0d0a inset !important; box-shadow: 0 0 0 1000px #0f0d0a inset !important; -webkit-text-fill-color: var(--nf-txt, #F6F2EC) !important; caret-color: #fff;
}
.tr-nutri .nf-f:focus-within { border-color: rgba(255, 255, 255, .6); }
.tr-nutri .nf-f small { white-space: nowrap; overflow: visible; }
.tr-nutri .nf-f em { flex: none; }
.tr-nutri .nf-f span { min-width: 0; }
@media (max-width: 430px) {
  .tr-nutri .nf-r2:not(.eau) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-nutri .nf-f { padding: 4px 10px 5px; }
}

/* ── 5. Le carré de l'eau : « − » et « + » dedans (vue du client) ── */
.tr-nutri .nf-mc-eau { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; padding: 8px 10px 9px; }
.tr-nutri .nf-mc-eau > small, .tr-nutri .nf-mc-eau > b, .tr-nutri .nf-mc-eau > .nf-bar { grid-column: 1; }
.tr-nutri .nf-mc-eau > .nf-eau-ctl { grid-column: 2; grid-row: 1 / 4; display: flex; gap: 8px; }
.tr-nutri .nf-eau-b {
  min-width: 44px; min-height: 44px; border-radius: 14px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font: 800 26px/1 inherit; font-family: inherit; color: #FFEFC9; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .02)), rgba(32, 28, 20, .85);
  border: 1px solid rgba(255, 233, 184, .55);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .4);
}
.tr-nutri .nf-eau-b:active { transform: scale(.96); }
.tr-nutri .nf-eau-b:disabled { opacity: .38; cursor: default; }
.tr-nutri .nf-eau-b:focus-visible { outline: 2px solid #FFE3A3; outline-offset: 2px; }

/* ── 6. « Livre de nutrition » : la tuile-lien sous « Liste de courses » est retirée de l'affichage (rien n'est supprimé du code) ;
      le signet du Livre en haut à droite et l'ouverture du Livre restent l'accès officiel. ── */
/* retiré le 04/10 18:15 : la carte « Livre de nutrition » du bas est masquée par le lot Livre a31 (html.lv-ret-nutri, interrupteur livre.retouches) ; doublon supprimé pour que « livre.retouches=0 » la rende bien (épreuve-livre-barre-nav). */
/* .tr-nutri a.tr-livre-tuile { display: none !important; } */

/* ── 7. « Tenir · charger · récup » remontés entre le calendrier et les repères (ordre d'affichage : le nœud est déplacé par nutrition-frise.js) ── */
.tr-nutri .nf-slot-modes { display: block; }
.tr-nutri .nf-slot-modes .tr-modes { margin: 8px 0 6px; }

/* ── 8. La bulle de la 1re vue des trois ronds (même mécanique que « Livre interactif » : texte clair + croix de 44 px ; ensuite les ronds restent nus) ── */
.tr-nutri .nf-modes-aide { position: relative; display: flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 4px 4px 4px 12px; border-radius: 14px; background: rgba(14, 14, 16, .96); border: 1px solid var(--tr-or, #d4a04a); color: #fff; font-size: 14px; line-height: 1.3; }
.tr-nutri .nf-modes-aide span { flex: 1; min-width: 0; }
.tr-nutri .nf-modes-croix { flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.tr-nutri .nf-modes-croix:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tr-nutri .nf-modes-aide + .tr-modes { margin-top: 4px; }

/* ── 9. Le signet du Livre (marque-page en haut à droite) : lettrage HORIZONTAL, ENTIER et lisible (ordre d'A, 16:51) ──
   Avant : la miniature de la couverture (échelle .133) portait « Livre de nutrition » en ~4 px de haut : illisible. Maintenant : miniature un peu plus grande + une étiquette
   horizontale de 12 px, toujours entière, posée sur le bas de la couverture ; le texte minuscule de la miniature est masqué (décor seul). Même bouton, mêmes écouteurs, même aria-label ;
   cible 60 × 92 px (≥ 44) ; la bulle « Livre interactif » descend d'autant. Spécificité renforcée : immersif.css est chargé APRÈS cette feuille. */
html:root .tr-nutri { --lv-s-droite: 8px; }
html:root .tr-nutri .lv-signet { width: 60px; height: 92px; }
html:root .tr-nutri .lv-signet .lv-couv-cadre small, html:root .tr-nutri .lv-signet .lv-couv-cadre b, html:root .tr-nutri .lv-signet .lv-couv-cadre em { visibility: hidden; }
html:root .tr-nutri .lv-signet::before {
  content: "Livre de\A nutrition"; white-space: pre; position: absolute; z-index: 5; left: 0; right: 0; bottom: 3px; box-sizing: border-box;
  padding: 16px 0 4px; text-align: center; border-radius: 0 0 8px 8px; pointer-events: none;
  font: 800 12px/1.1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78) 42%);
}
html:root .tr-nutri .lv-signet-bulle { top: calc(var(--lv-s-haut) + 96px); }