/* 04/10 — NUTRITION · LA DATE EN HAUT À DROITE ET SON MINI-CALENDRIER (validé par Alexandre, appel du 04/10 à 08h45).
 * Fichier AJOUTÉ : il n'altère aucune règle existante. Tout est préfixé « tr-ndate » ; la puce est posée en absolu
 * (elle ne déplace rien) et la zone du jour consulté est VIDE tant qu'on n'a pas choisi un jour passé.
 * Charte : noir et or de l'app (var(--tr-or) avec repli), cibles ≥ 44 px, aucun mouvement imposé. */
.tr-nutri > .tr-ndate-racine.tr-ndate-racine { position: static; z-index: auto; }          /* rend le bloc transparent : la puce se place par rapport à .tr-nutri */
.tr-ndate-racine > [data-ndate-zone] { margin: 0; }
.tr-ndate { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; z-index: 6; }
.tr-ndate-puce {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 64px; min-height: 64px; padding: 6px 9px 7px; margin: 0;
  border-radius: 16px; border: 1px solid rgba(212, 160, 74, .65);
  background: rgba(8, 8, 10, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #fff; font-family: var(--tr-police, inherit); line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tr-ndate-puce:focus-visible, .tr-ndate-bouton:focus-visible, .tr-ndate-case:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(212, 160, 74, .85); }
.tr-ndate-puce.passe { background: rgba(32, 24, 8, .86); border-color: var(--tr-or, #d4a04a); border-width: 2px; }
.tr-ndate-sem, .tr-ndate-mois { font: 700 11px/1 var(--tr-police, inherit); letter-spacing: .14em; padding-left: .14em; color: var(--tr-or, #d4a04a); }
.tr-ndate-jr { font: italic 800 30px/1 var(--tr-police, inherit); letter-spacing: -.02em; color: #fff; margin: 2px 0 1px; }

.tr-ndate-fond { position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .5); }
.tr-ndate-fond[hidden], .tr-ndate-cal[hidden] { display: none; }
.tr-ndate-cal {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(358px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 10px 12px;
  border-radius: 20px; border: 1px solid rgba(212, 160, 74, .6); background: rgba(12, 12, 14, .97); color: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .7); font-family: var(--tr-police, inherit);
}
.tr-ndate-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 6px; }
.tr-ndate-titre { margin: 0; font: 700 16px/1.2 var(--tr-police, inherit); color: #fff; }
.tr-ndate-bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; margin: 0;
  border-radius: 14px; border: 1px solid rgba(212, 160, 74, .6); background: rgba(212, 160, 74, .12); color: #fff;
  font: 600 14px/1 var(--tr-police, inherit); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tr-ndate-bouton[aria-disabled="true"] { opacity: .38; cursor: default; }
.tr-ndate-fleche { font-size: 26px; padding: 0 10px; }
.tr-ndate-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-ndate-mois-nom { font: 700 16px/1.2 var(--tr-police, inherit); text-transform: capitalize; text-align: center; flex: 1; }
.tr-ndate-grille { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 4px; }
.tr-ndate-grille th { font: 600 11px/1 var(--tr-police, inherit); color: #bdb9ae; padding: 6px 0; text-transform: uppercase; letter-spacing: .06em; }
.tr-ndate-grille td { padding: 1px; text-align: center; }
.tr-ndate-case {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0;
  border-radius: 12px; border: 1px solid transparent; background: transparent; color: #fff; font: 600 16px/1 var(--tr-police, inherit); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tr-ndate-case.auj { border-color: rgba(212, 160, 74, .85); }
.tr-ndate-case.choisi { background: var(--tr-or, #d4a04a); color: #0b0b0c; border-color: var(--tr-or, #d4a04a); }
.tr-ndate-case.futur { color: #6f6c64; cursor: default; }
.tr-ndate-point { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--tr-or, #d4a04a); }
.tr-ndate-case .tr-ndate-point { position: absolute; bottom: 5px; }
.tr-ndate-case.choisi .tr-ndate-point { background: #0b0b0c; }
.tr-ndate-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px 0; }
.tr-ndate-legende { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.25 var(--tr-police, inherit); color: #bdb9ae; }
.tr-ndate-auj { background: var(--tr-or, #d4a04a); color: #0b0b0c; border-color: var(--tr-or, #d4a04a); }

.tr-ndate-jour { margin: 16px 0 0; padding: 14px 14px 12px; }
.tr-ndate-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tr-ndate-entete b { display: block; font: 700 18px/1.2 var(--tr-police, inherit); color: #fff; text-transform: capitalize; }
.tr-ndate-entete small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--tr-or, #d4a04a); }
.tr-ndate-h3 { margin: 14px 0 4px; font: 700 12px/1.2 var(--tr-police, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--tr-or, #d4a04a); }
.tr-ndate-h4 { margin: 8px 0 2px; font: 600 13px/1.2 var(--tr-police, inherit); color: #d2d4d7; }
.tr-ndate-liste { list-style: none; margin: 0; padding: 0; }
.tr-ndate-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14.5px; line-height: 1.3; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tr-ndate-val { white-space: nowrap; color: #d2d4d7; }
.tr-ndate-vide, .tr-ndate-eau { margin: 0; font-size: 14.5px; color: #d2d4d7; }
.tr-ndate-eau { color: #fff; font-weight: 600; }
.tr-ndate-totaux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.tr-ndate-totaux dt { font-size: 12px; color: #bdb9ae; }
.tr-ndate-totaux dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: #fff; }
.tr-ndate-note { margin: 10px 0 0; font-size: 12px; line-height: 1.35; color: #bdb9ae; }
@media (prefers-reduced-motion: no-preference) { .tr-ndate-cal:not([hidden]) { animation: tr-ndate-entre .16s ease-out; } }
@keyframes tr-ndate-entre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html[data-contrast="fort"] .tr-ndate-puce, html[data-contrast="fort"] .tr-ndate-cal { border-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 04/10 12:06 — ORDRE D'ALEXANDRE : la DATE en haut à GAUCHE, le LIVRE (signet-couverture, immersif.css) en haut à DROITE, sans chevauchement.
 * Ajout seul : on ne change que le côté de la puce et celui de son calendrier (même taille, même contenu, même comportement). */
.tr-nutri .tr-ndate { right: auto; left: 16px; }
.tr-nutri .tr-ndate-cal { right: auto; left: 0; }