/* ═════════════════════════════════════════════════════════════════
 * NUTRITION · VARIANT A — anneaux kcal + petits carrés macros
 * AJOUT SEUL · interrupteur html[data-nutri-anneaux-a="1"]
 * Charte sombre+or ; cristal (skin-nutrition-cristal*) non modifié.
 * ═════════════════════════════════════════════════════════════════ */
html:root:root[data-nutri-anneaux-a="1"] {
  --na-or: #E3BC52;
  --na-or-clair: #F2D98A;
  --na-or-fonce: #CFA32B;
  --na-or-metal: #D4AF37;
  --na-noir: #0c0b09;
  --na-encre: #14100a;
  --na-feu: #FF7A1A;
  --na-feu-chaud: #FFEB7A;
}

/* ── Bloc 3 anneaux (inséré avant .nf-res) ── */
html:root:root[data-nutri-anneaux-a="1"] .na-bloc {
  margin: 10px 0 6px;
  padding: 10px 4px 4px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,16,10,.92), rgba(8,7,5,.98));
  border: 1px solid rgba(227, 188, 82, .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px -18px #000;
}
html:root:root[data-nutri-anneaux-a="1"] .na-rings {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  align-items: start;
}
html:root:root[data-nutri-anneaux-a="1"] .na-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 2px 0 4px;
}
html:root:root[data-nutri-anneaux-a="1"] .na-ring {
  position: relative;
  width: min(108px, 28vw);
  height: min(108px, 28vw);
  border-radius: 50%;
  flex: none;
}
html:root:root[data-nutri-anneaux-a="1"] .na-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18% 10% 14%;
  pointer-events: none;
  z-index: 2;
}
html:root:root[data-nutri-anneaux-a="1"] .na-icos {
  display: flex; gap: 5px; align-items: center; justify-content: center;
  color: var(--na-or-clair); margin-bottom: 2px;
}
html:root:root[data-nutri-anneaux-a="1"] .na-lab {
  font: 600 9.5px/1.15 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--na-or);
  max-width: 88%;
}
html:root:root[data-nutri-anneaux-a="1"] .na-val {
  margin-top: 2px;
  font: 800 22px/1 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--na-or-clair);
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 12px rgba(227,188,82,.25);
  font-variant-numeric: tabular-nums;
}
html:root:root[data-nutri-anneaux-a="1"] .na-val-feu {
  color: #FFC978;
  text-shadow: 0 0 10px rgba(255,122,26,.55), 0 1px 0 rgba(0,0,0,.5);
}
html:root:root[data-nutri-anneaux-a="1"] .na-foot {
  margin-top: 2px; color: var(--na-or-fonce); opacity: .85;
}
html:root:root[data-nutri-anneaux-a="1"] .na-sous {
  margin: 6px 0 0;
  padding: 0 4px;
  text-align: center;
  font: 600 9px/1.2 system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--na-or);
  opacity: .92;
}

/* Relief / gloss metallic gold — left ring */
html:root:root[data-nutri-anneaux-a="1"] .na-ring-relief {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.35), transparent 42%),
    conic-gradient(from -90deg, var(--na-or-clair) 0 var(--p, 0%), rgba(60,45,20,.55) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
  box-shadow:
    0 0 0 1px rgba(227,188,82,.35),
    0 6px 16px -8px rgba(0,0,0,.9),
    inset 0 1px 1px rgba(255,255,255,.35);
  filter: drop-shadow(0 0 6px rgba(227,188,82,.25));
}
html:root:root[data-nutri-anneaux-a="1"] .na-ring-gloss {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}

/* Center — double-lined gold target (fixed daily) */
html:root:root[data-nutri-anneaux-a="1"] .na-ring-cible {
  background:
    radial-gradient(120% 80% at 30% 18%, rgba(255,255,255,.28), transparent 40%),
    linear-gradient(160deg, #F2D98A, #E3BC52 45%, #A88420 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
  box-shadow:
    0 0 0 2px rgba(20,16,10,.9),
    0 0 0 3.5px rgba(227,188,82,.55),
    0 8px 18px -10px #000,
    inset 0 1px 1px rgba(255,255,255,.4);
}
html:root:root[data-nutri-anneaux-a="1"] .na-cell[data-na="apport"] .na-in {
  padding-bottom: 22%;
}

/* Right — volcanic burning wick / fuse */
html:root:root[data-nutri-anneaux-a="1"] .na-ring-volcan {
  background: radial-gradient(circle at 50% 50%, rgba(20,10,4,.2), transparent 60%);
}
html:root:root[data-nutri-anneaux-a="1"] .na-volcan-svg {
  display: block; overflow: visible;
}
html:root:root[data-nutri-anneaux-a="1"] .na-volcan-arc {
  animation: na-arc-pulse 2.4s ease-in-out infinite;
}
html:root:root[data-nutri-anneaux-a="1"] .na-braise {
  transform-origin: 50px 50px;
  animation: na-braise-orbit 3.6s linear infinite;
  opacity: .9;
}
html:root:root[data-nutri-anneaux-a="1"] .na-braise.b2 { animation-duration: 4.2s; animation-delay: -.4s; }
html:root:root[data-nutri-anneaux-a="1"] .na-braise.b3 { animation-duration: 3.1s; animation-delay: -.9s; }
html:root:root[data-nutri-anneaux-a="1"] .na-braise.b4 { animation-duration: 5s; animation-delay: -1.2s; }
html:root:root[data-nutri-anneaux-a="1"] .na-braise.b5 { animation-duration: 3.8s; animation-delay: -2s; }
html:root:root[data-nutri-anneaux-a="1"] .na-volcan-flamme {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    conic-gradient(from -90deg,
      transparent 0 calc(var(--p, 0%) - 8%),
      rgba(255,122,26,.0) calc(var(--p, 0%) - 8%),
      rgba(255,180,40,.45) var(--p, 0%),
      transparent calc(var(--p, 0%) + 2%),
      transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 6px));
  animation: na-flamme-flicker 0.9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes na-arc-pulse {
  0%, 100% { stroke-width: 7.5; filter: url(#na-glow); }
  50% { stroke-width: 9; }
}
@keyframes na-braise-orbit {
  from { transform: rotate(0deg) translateY(0); opacity: .95; }
  50% { opacity: .55; }
  to { transform: rotate(360deg) translateY(0); opacity: .95; }
}
@keyframes na-flamme-flicker {
  from { opacity: .55; transform: scale(1); }
  to { opacity: .95; transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  html:root:root[data-nutri-anneaux-a="1"] .na-volcan-arc,
  html:root:root[data-nutri-anneaux-a="1"] .na-braise,
  html:root:root[data-nutri-anneaux-a="1"] .na-volcan-flamme {
    animation: none !important;
  }
}

/* ── Petits carrés macros (habillage de .nf-res existant) ── */
html:root:root[data-nutri-anneaux-a="1"] .nf-res.na-petits-carres,
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 4px 0 10px !important;
  padding: 8px 4px !important;
  border-radius: 12px;
  border: 1px solid rgba(227,188,82,.4);
  background: linear-gradient(180deg, rgba(18,14,8,.95), rgba(10,8,5,.98));
  align-items: stretch;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 6px 4px !important;
  min-height: 56px !important;
  position: relative;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc + .nf-mc {
  border-left: 1px solid rgba(227,188,82,.35) !important;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc > small {
  color: var(--na-or) !important;
  font: 700 10px/1.1 system-ui, sans-serif !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 !important;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc > b,
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc .na-eau-val {
  display: block !important;
  color: var(--na-or-clair) !important;
  font: 800 15px/1.1 'Barlow Condensed', system-ui, sans-serif !important;
  margin: 4px 0 0 !important;
  white-space: nowrap;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc .nf-bar,
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc .v5-ring-wrap,
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc .v5-eau-niv,
html:root:root[data-nutri-anneaux-a="1"] [data-na-hide="1"] {
  display: none !important;
}

/* Eau : valeur visible + ± existants (data-nf-eau) — pas de nouveau stockage */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-mc-eau {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 4px !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 4px 2px !important;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-mc-eau > small {
  grid-column: 1 / -1; grid-row: 1;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-mc-eau > b,
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-mc-eau .na-eau-val {
  grid-column: 1; grid-row: 2;
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  position: static !important;
  width: auto !important;
  margin: 2px 0 0 !important;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-mc-eau .nf-eau-ctl {
  grid-column: 2; grid-row: 2;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  position: static !important;
  margin: 0 !important;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-mc-eau .nf-eau-b {
  width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(227,188,82,.7) !important;
  background: #0d0a06 !important;
  color: var(--na-or) !important;
  font: 800 16px/1 system-ui !important;
  padding: 0 !important;
  display: grid !important; place-items: center !important;
}

/* Écrans étroits */
@media (max-width: 360px) {
  html:root:root[data-nutri-anneaux-a="1"] .na-val { font-size: 18px !important; }
  html:root:root[data-nutri-anneaux-a="1"] .na-lab { font-size: 8.5px !important; }
  html:root:root[data-nutri-anneaux-a="1"] .na-ring { width: min(96px, 27vw); height: min(96px, 27vw); }
  html:root:root[data-nutri-anneaux-a="1"] .na-lab { max-width: 64% !important; }
  html:root:root[data-nutri-anneaux-a="1"] .na-in { padding-top: 24% !important; }
}

/* ── 27/10 · QC Chef (AJOUT SEUL, après tout le reste) ──────────────────
 * 1) Boutons eau ± : cible tactile ≥ 44 px. Le rond visible reste à 28 px,
 *    la zone de toucher est agrandie par un ::after transparent (44 × 44),
 *    les deux boutons espacés de 16 px pour que les zones ne se chevauchent pas.
 * 2) Valeur eau : chiffre + « ml » DANS un petit rond, sans débord. */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau .nf-eau-ctl {
  gap: 16px !important;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau .nf-eau-b {
  position: relative !important;
  overflow: visible !important;
  touch-action: manipulation;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau .nf-eau-b::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau > b.na-eau-val {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(227,188,82,.7) !important;
  background: #0d0a06 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  /* le Journal v2 masquait la quantité (clip / clip-path / absolute) : on la rend visible ici */
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  visibility: visible !important;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau .na-eau-n {
  font: 800 11px/1 'Barlow Condensed', system-ui, sans-serif;
  color: var(--na-or-clair);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau .na-eau-u {
  font: 700 8px/1 system-ui, sans-serif;
  color: var(--na-or);
  margin-top: 1px;
  text-transform: lowercase;
}
@media (max-width: 360px) {
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau > b.na-eau-val {
    width: 36px !important; height: 36px !important; min-width: 36px !important;
  }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res > .nf-mc.nf-mc-eau .na-eau-n { font-size: 10px; }
}

/* ══ 27/10 · v4 « exactement comme l'image d'A » (REFERENCE-A-27oct.jpg) — AJOUT SEUL ══════════ */
@font-face { font-family: 'NA4 Cormorant'; src: url('polices/cormorant-garamond-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'NA4 Cinzel'; src: url('fil-v5/polices/cinzel-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri:has(.nf-racine) .nf-res.nf-res[data-na4-masque="1"], html:root:root[data-nutri-anneaux-a="1"] .nf-res[data-na4-masque="1"] { display: none !important; }
html:root:root[data-nutri-anneaux-a="1"] .na4 {
  --na4-or: #E9C46A; --na4-or-clair: #F7DC8E; --na4-or-fonce: #A77A26;
  --na4-d: min(116px, 29.5vw);
  position: relative; margin: 6px 0 12px; padding: 12px 6px 12px;
  border-radius: 14px;
  background: radial-gradient(120% 80% at 50% 0%, #15110a 0%, #050403 60%, #000 100%);
  box-shadow: inset 0 0 0 1px rgba(233,196,106,.12);
  color: var(--na4-or);
  font-family: 'NA4 Cinzel', 'TR Cinzel', 'Cormorant Garamond', Georgia, serif;
  overflow: hidden;
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na4 .na4-tete { text-align: center; margin: 0 0 10px; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na4 h2.na4-titre {
  margin: 0 !important; padding: 0 !important; border: 0 !important; text-shadow: none !important; box-shadow: none !important; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); font: 600 clamp(22px, 7vw, 28px)/1 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, #FBE7A6 0%, #E3BC52 55%, #A77A26 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-filet { display: block; width: 64%; height: 10px; margin: 5px auto 0; }
html:root:root[data-nutri-anneaux-a="1"] .na4-anneaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
html:root:root[data-nutri-anneaux-a="1"] .na4-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
html:root:root[data-nutri-anneaux-a="1"] .na4-lab {
  position: relative; z-index: 3; text-shadow: 0 0 4px #000, 0 0 2px #000; background: none !important; box-shadow: none !important; border: 0 !important;
  margin: 0 0 6px; font: 500 calc(var(--na4-d) * .082)/1.1 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; letter-spacing: .04em; text-transform: uppercase; color: var(--na4-or); white-space: nowrap;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-ring { position: relative; width: var(--na4-d); height: var(--na4-d); }
html:root:root[data-nutri-anneaux-a="1"] .na4-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html:root:root[data-nutri-anneaux-a="1"] .na4-in {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; pointer-events: none;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-val {
  font: 500 calc(var(--na4-d) * .28)/1 'NA4 Cinzel', 'NA4 Cormorant', 'TR Cinzel', Georgia, serif; letter-spacing: -.01em;
  background: linear-gradient(180deg, #FCEBB0 0%, #E9C46A 50%, #B68428 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1; white-space: nowrap;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-val-feu {
  background: linear-gradient(180deg, #FFB04A 0%, #FF6A12 55%, #D9400A 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 6px rgba(255,100,20,.35));
}
html:root:root[data-nutri-anneaux-a="1"] .na4-ico { width: calc(var(--na4-d) * .36); height: auto; margin-top: 5px; color: var(--na4-or); }
html:root:root[data-nutri-anneaux-a="1"] .na4-sous {
  display: block; max-width: 70%; margin-top: 5px; font: 600 calc(var(--na4-d) * .058)/1.25 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; letter-spacing: .05em; text-transform: uppercase; color: #E8D9B0;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-hr { border: 0; height: 1px; margin: 12px 2px 10px; background: linear-gradient(90deg, transparent, rgba(233,196,106,.65) 12%, rgba(233,196,106,.65) 88%, transparent); }
html:root:root[data-nutri-anneaux-a="1"] .na4-macros { display: grid; grid-template-columns: 1fr 1fr 1fr 1.45fr; align-items: center; }
html:root:root[data-nutri-anneaux-a="1"] .na4-mac { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 2px 2px; min-height: 64px; }
html:root:root[data-nutri-anneaux-a="1"] .na4-mac + .na4-mac { border-left: 1px solid rgba(233,196,106,.45); }
html:root:root[data-nutri-anneaux-a="1"] .na4-mac small {
  display: inline-flex; align-items: center; gap: 4px; font: 500 calc(var(--na4-d) * .085)/1 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; letter-spacing: .03em; text-transform: uppercase; color: var(--na4-or); white-space: nowrap;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-mac b {
  margin-top: 6px; font: 500 calc(var(--na4-d) * .23)/1 'NA4 Cinzel', 'NA4 Cormorant', 'TR Cinzel', Georgia, serif; white-space: nowrap; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
  background: linear-gradient(180deg, #FCEBB0 0%, #E9C46A 50%, #B68428 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-goutte { width: calc(var(--na4-d) * .1); height: auto; color: var(--na4-or); }
html:root:root[data-nutri-anneaux-a="1"] .na4-eau { flex-direction: row; justify-content: space-evenly; gap: 2px; }
html:root:root[data-nutri-anneaux-a="1"] .na4-eau-txt { display: flex; flex-direction: column; align-items: center; min-width: 0; }
html:root:root[data-nutri-anneaux-a="1"] .na4-eau-ctl { display: flex; flex-direction: column; gap: 16px; }
html:root:root[data-nutri-anneaux-a="1"] .na4-eau-b {
  position: relative; width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 50%;
  border: 1.4px solid #E3BC52; background: radial-gradient(circle at 35% 30%, #2a2214, #0a0805 70%);
  box-shadow: 0 0 6px rgba(227,188,82,.35), inset 0 0 0 1px rgba(0,0,0,.6);
  color: #F2D58A; font: 400 20px/1 system-ui, sans-serif; display: grid; place-items: center; cursor: pointer; touch-action: manipulation;
}
html:root:root[data-nutri-anneaux-a="1"] .na4-eau-b::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; }
html:root:root[data-nutri-anneaux-a="1"] .na4-eau-b:disabled { opacity: .45; cursor: default; }
html:root:root[data-nutri-anneaux-a="1"] .na4-eau-b:focus-visible { outline: 2px solid #F7DC8E; outline-offset: 3px; }
@media (max-width: 360px) {
  html:root:root[data-nutri-anneaux-a="1"] .na4 { --na4-d: min(96px, 29vw); padding: 10px 4px; }
  html:root:root[data-nutri-anneaux-a="1"] .na4-eau-ctl { gap: 16px; }
}
html:root:root[data-nutri-anneaux-a="1"] .na4 .na4-u { font-family: 'NA4 Cormorant', Georgia, serif; font-weight: 700; font-size: 1.12em; }
html:root:root[data-nutri-anneaux-a="1"] .na4 .na4-val { letter-spacing: -.03em; }
html:root:root[data-nutri-anneaux-a="1"] .na4 .na4-svg-feu { inset: -25%; width: 150%; height: 150%; }
html:root:root[data-nutri-anneaux-a="1"] .na4 .na4-exemple {
  position: absolute; top: 10px; right: 10px; z-index: 4; padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(233,196,106,.7); background: rgba(10,8,5,.85); color: #F2D58A;
  font: 700 9px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
/* l'onglet fixe « Livre » (bord droit, z-index 40) ne doit jamais couvrir les ± de l'eau : 30 px de marge à droite */
html:root:root[data-nutri-anneaux-a="1"] .na4 .na4-macros { padding-right: 30px; }
@media (max-width: 360px) { html:root:root[data-nutri-anneaux-a="1"] .na4 .na4-macros { padding-right: 40px; } }

/* ══ 27/10 · v5 « découpée dans la photo d'A » — grille de la photo 1280 × 720, 1cqw = 12,8 px photo ══ */
@font-face { font-family: 'NA5 Cormorant'; src: url('polices/cormorant-garamond-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na4.na5 {
  container-type: inline-size; position: relative; display: block; width: 100%; aspect-ratio: 1280 / 720; height: auto;
  margin: 6px 0 12px; padding: 0; border-radius: 0; overflow: hidden; box-shadow: none;
  background: none;
  color: #D9B66A; font-family: 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; isolation: auto; /* v5b : pas de groupe isolé, les découpes en screen se fondent dans l'écran avec le fond en dégradé */
}
/* v5b : le fond noir se fond dans l'écran (bords en dégradé) ; seul le fond est masqué, le contenu reste entier et cliquable */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na4.na5::before { content: ''; position: absolute; inset: 0; z-index: auto; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 45%, #0b0b0a 0%, #080807 55%, #020202 100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
html:root:root[data-nutri-anneaux-a="1"] .na5 > * { position: absolute; margin: 0; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 h2.na5-titre {
  left: calc(395cqw / 12.8); top: calc(15cqw / 12.8); width: calc(485cqw / 12.8); height: calc(95cqw / 12.8);
  background: url('nutri-anneaux-a5/titre-journal.webp') center / 100% 100% no-repeat; mix-blend-mode: screen; -webkit-text-fill-color: initial; filter: none;
}
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-cell { position: absolute; inset: 0; pointer-events: none; display: block; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-cell > * { position: absolute; margin: 0; }
html:root:root[data-nutri-anneaux-a="1"] .na5 { --c1: calc(236cqw / 12.8); --c2: calc(633cqw / 12.8); --c3: calc(1022cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-c1 { --cx: var(--c1); --cy: calc(314cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-c2 { --cx: var(--c2); --cy: calc(313cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-c3 { --cx: var(--c3); --cy: calc(320cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-lab {
  left: var(--cx); top: calc(140cqw / 12.8); transform: translate(-50%, -50%); white-space: nowrap; z-index: 3;
  font: 400 max(7.5px, calc(18cqw / 12.8))/1 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; letter-spacing: .045em; text-transform: uppercase;
  color: #D7B46C; text-shadow: none; background: none !important; border: 0 !important; padding: 0;
}
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-ring { left: var(--cx); top: var(--cy); width: calc(330cqw / 12.8); height: calc(330cqw / 12.8); transform: translate(-50%, -50%); mix-blend-mode: screen; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-ring > span { position: absolute; inset: 0; background: url('nutri-anneaux-a5/anneau-or.webp') center / 100% 100% no-repeat; mix-blend-mode: screen; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-piste { filter: sepia(.35) saturate(.85) brightness(.5); opacity: .2; } /* v5b : fond doré atténué (non rempli), nettement moins vif que l'or rempli */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-or {
  -webkit-mask: conic-gradient(#000 0 var(--na5-pct), transparent var(--na5-pct) 360deg); mask: conic-gradient(#000 0 var(--na5-pct), transparent var(--na5-pct) 360deg);
}
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-grad { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; }
/* anneau de feu : la flamme de la photo, révélée depuis 12h dans le sens horaire, jamais au-delà de l'arc (v5b : plus rien à gauche 241–360°) */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-braise { /* v5b : reflet doré de la photo (plus de braise noire) là où la flamme n'est pas encore */
  filter: sepia(.35) saturate(.85) brightness(.5); opacity: .2;
  -webkit-mask: conic-gradient(transparent 0 var(--na5-arc), #000 calc(var(--na5-arc) + 4deg) 360deg); mask: conic-gradient(transparent 0 var(--na5-arc), #000 calc(var(--na5-arc) + 4deg) 360deg); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-cendres { /* v5b : cendres / particules qui brûlent, seulement dans le secteur atteint */
  inset: calc(-110cqw / 12.8); background: none; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask: conic-gradient(#000 0 var(--na5-arc), transparent min(calc(var(--na5-arc) + 3deg), 360deg) 360deg); mask: conic-gradient(#000 0 var(--na5-arc), transparent min(calc(var(--na5-arc) + 3deg), 360deg) 360deg);
  animation: none; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-cendres > i { position: absolute; left: 50%; top: 50%; width: 1.6px; height: 1.6px; margin: -.8px; border-radius: 50%; background: #FFC877; box-shadow: 0 0 1.5px .5px rgba(255, 130, 40, .65); /* v5e : braises plus fines, comme les étincelles de la photo */
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1cqw / 12.8)); opacity: 0; will-change: transform, opacity; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-cendres > i { animation: na5-braise-monte var(--d) linear var(--t) infinite; }
@keyframes na5-braise-monte { 0% { opacity: 0; translate: 0 0; scale: 1; } 15% { opacity: 1; } 45% { opacity: .55; } 60% { opacity: .95; } 100% { opacity: 0; translate: 5px -18px; scale: .5; } }
html:root:root[data-na5-cache] .na5 .na5-r3 *, html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3[data-na5-pause] *, html:root:root[data-na5-cache] .na5 .na5-r3 *::after, html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3[data-na5-pause] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-cendres > i { animation: none; opacity: .8; } }
@media (prefers-reduced-motion: reduce) { html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-cendres { animation: none; } }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu {
  inset: calc(-67cqw / 12.8); background-image: url('nutri-anneaux-a5/anneau-flamme.webp');
  -webkit-mask: conic-gradient(from 0deg, rgba(0,0,0,.35) 0, #000 6deg, #000 calc(var(--na5-arc) - 4deg), transparent calc(var(--na5-arc) + 12deg)); mask: conic-gradient(from 0deg, rgba(0,0,0,.35) 0, #000 6deg, #000 calc(var(--na5-arc) - 4deg), transparent calc(var(--na5-arc) + 12deg));
  transform-origin: 50% 50%; animation: na5-scintille 2.4s ease-in-out infinite;
}
@keyframes na5-scintille { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 30% { opacity: .93; transform: scale(1.008) rotate(.35deg); } 60% { opacity: .97; transform: scale(.997) rotate(-.25deg); } }
/* v5b : 2e couche de flamme décalée qui vacille (transform/opacity seulement), sous le même masque que .na5-feu */
/* v5g (ordre d'A 10h05) : comme sur la photo, la flamme brûle AUSSI sur et dans la bande de l'anneau (mesure photo : flamme de r ≈ 106 à 166 u pour une bande à 132 u ; avant, rien sous 120 u).
   v5h : une seule image anneau-flamme.webp (découpée de la photo) couvre toute la bande, dedans et dehors */
@media (prefers-reduced-motion: reduce) { html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu { animation: none; } }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-val {
  left: var(--cx); top: calc(300cqw / 12.8); transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  font: 700 calc(108cqw / 12.8)/1 'NA5 Cormorant', 'Cormorant Garamond', Georgia, serif; letter-spacing: -.01em; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
  background: linear-gradient(180deg, #F2D58E 0%, #D9B060 55%, #B88D3E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: none;
}
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-val.na4-val-feu { top: var(--cy); /* v5b : 620 centré dans le rond de feu */ background: linear-gradient(180deg, #FF8A2A 0%, #F0601A 55%, #D84A12 100%); -webkit-background-clip: text; background-clip: text; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-icone { left: calc(170cqw / 12.8); top: calc(345cqw / 12.8); width: calc(135cqw / 12.8); height: calc(80cqw / 12.8); background: url('nutri-anneaux-a5/icone-repas.webp') center / 100% 100% no-repeat; mix-blend-mode: screen; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-sous {
  left: var(--cx); top: calc(383cqw / 12.8); transform: translate(-50%, -50%); width: calc(240cqw / 12.8); text-align: center; z-index: 2;
  font: 400 max(5.5px, calc(15cqw / 12.8))/1.3 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #E6D3A6;
}
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-hr { left: calc(30cqw / 12.8); top: calc(505cqw / 12.8); width: calc(1220cqw / 12.8); height: calc(20cqw / 12.8); background: url('nutri-anneaux-a5/filet-h.webp') center / 100% 100% no-repeat; mix-blend-mode: screen; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-vr { top: calc(530cqw / 12.8); width: calc(16cqw / 12.8); height: calc(140cqw / 12.8); background: url('nutri-anneaux-a5/filet-v.webp') center / 100% 100% no-repeat; mix-blend-mode: screen; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-v1 { left: calc(317cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-v2 { left: calc(586cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-v3 { left: calc(842cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-mac:not(.na5-m4) { top: 0; height: 0; width: 0; display: block; min-height: 0; padding: 0; border: 0 !important; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-mac > * { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; margin: 0; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-mac small { top: calc(559cqw / 12.8); display: inline-flex; align-items: center; gap: .3em;
  font: 400 max(7.5px, calc(18cqw / 12.8))/1 'NA4 Cinzel', 'TR Cinzel', Georgia, serif; letter-spacing: .045em; text-transform: uppercase; color: #D7B46C; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-mac b { top: calc(626cqw / 12.8); /* v5b : plus d'air sous le nom */
  font: 700 calc(70cqw / 12.8)/1.3 'NA5 Cormorant', 'Cormorant Garamond', Georgia, serif; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
  background: linear-gradient(180deg, #F2D58E 0%, #D9B060 55%, #B88D3E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding: .04em .08em .16em; overflow: visible; /* v5b : « g », « L » et virgule jamais rognés par le background-clip */ }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-mac .na4-u { font: inherit; font-size: 1em; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m1 > * { left: calc(181cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m2 > * { left: calc(456cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m3 > * { left: calc(719cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m4 small { left: calc(975cqw / 12.8); mix-blend-mode: screen; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m4 b { left: calc(966cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-goutte { display: inline-block; width: calc(50cqw / 12.8); height: calc(55cqw / 12.8); margin-left: .25em; background: url('nutri-anneaux-a5/goutte.webp') center / 100% 100% no-repeat; mix-blend-mode: screen; }
/* ± : boîte de toucher réelle 44 × 44 (sans chevauchement : celle du + monte, celle du − descend, décalées à gauche pour l'onglet « Livre ») ; le bouton de la photo est dessiné en ::before à sa place exacte */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-b { --bx: min(calc(1135cqw / 12.8), calc(100% - 58px)); left: calc(var(--bx) - 30px); width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 10px;
  background: none; box-shadow: none; cursor: pointer; touch-action: manipulation; z-index: 5; color: transparent; font-size: 0; overflow: visible; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-b::before { content: ''; position: absolute; left: calc(30px - 40cqw / 12.8); width: calc(80cqw / 12.8); height: calc(76cqw / 12.8); background: center / 100% 100% no-repeat; mix-blend-mode: screen; pointer-events: none; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-plus { top: calc(565cqw / 12.8 - 36px); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-plus::before { top: calc(36px - 38cqw / 12.8); background-image: url('nutri-anneaux-a5/bouton-plus.webp'); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-moins { top: calc(637cqw / 12.8 - 8px); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-moins::before { top: calc(8px - 38cqw / 12.8); background-image: url('nutri-anneaux-a5/bouton-moins.webp'); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m4 { left: calc(860cqw / 12.8); top: calc(520cqw / 12.8); display: block; padding: 0; min-height: 0; border: 0 !important; background: none; width: calc(240cqw / 12.8); height: calc(180cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m4 small { left: calc(115cqw / 12.8) !important; top: calc(39cqw / 12.8) !important; mix-blend-mode: screen; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-m4 b { left: calc(106cqw / 12.8) !important; top: calc(106cqw / 12.8) !important; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-b:disabled { opacity: .5; cursor: default; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-b:focus-visible { outline: 2px solid #F7DC8E; outline-offset: 2px; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na4-exemple { top: 2cqw; right: 2cqw; }

/* ══ v5b · eau ± agrandis (rond visible 46 px, zone de toucher 56 × 56), une seule disposition : [−] quantité [+] sur la ligne de la quantité (choix d'A 27/10) ══ */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m4 { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m4 > * { pointer-events: auto; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-b { width: 56px !important; height: 56px !important; border-radius: 4px; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-b::after { width: 56px; height: 56px; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-b::before { left: 5px !important; top: 5px !important; width: 46px !important; height: 46px !important; }
/* [−] 1,8 L [+] : colonnes du bas resserrées à gauche pour faire la place */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m4 b { left: calc(100% - 92px - 61cqw / 12.8) !important; top: calc(626cqw / 12.8) !important; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m4 small { left: calc(100% - 92px - 61cqw / 12.8) !important; top: calc(559cqw / 12.8) !important; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-plus { left: calc(100% - 92px); top: calc(626cqw / 12.8 - 28px); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-moins { left: calc(100% - 149px - 122cqw / 12.8); top: calc(626cqw / 12.8 - 28px); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m1 > * { left: calc(140cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m2 > * { left: calc(345cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m3 > * { left: calc(530cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-v1 { left: calc(243cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-v2 { left: calc(437cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-v3 { display: none; }
@media (max-width: 360px) {
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m1 > * { left: calc(82cqw / 12.8); }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m2 > * { left: calc(222cqw / 12.8); }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m3 > * { left: calc(362cqw / 12.8); }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-v1 { left: calc(152cqw / 12.8); }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-v2 { left: calc(292cqw / 12.8); }
}
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na4.na5 { /* +10 px : la rangée [−] eau [+] reste dans le bloc */  aspect-ratio: auto; height: 0; padding-bottom: calc(56.25% + 6.25% + 10px); } /* v5d : +80 unités photo (40 sous le titre, 40 sous les anneaux) */
/* v5b : découpes passées en alpha (luminance → alpha) : plus besoin de « screen », qui laissait des rectangles noirs sur le fond fondu */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 *, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 *::before, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 *::after { mix-blend-mode: normal !important; }
@media (max-width: 360px) { /* à 320 px l'onglet « Livre » est plus large : ± décalés de 5 px de plus ; zone de toucher de l'onglet « Livre » réelle = 51 px depuis le bord droit */
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m4 b, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m4 small { left: calc(100% - 99px - 61cqw / 12.8) !important; }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-plus { left: calc(100% - 97px); }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-moins { left: calc(100% - 157px - 122cqw / 12.8); }
}
@media (max-width: 360px) { /* v5c · 320 px : [−] eau [+] + zone de l'onglet « Livre » ne laissent que ~110 px aux trois macros : libellés et valeurs un peu plus petits, filets retirés */
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-mac:not(.na5-m4) small { font-size: 6.6px; letter-spacing: 0; }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-mac:not(.na5-m4) b { font-size: calc(62cqw / 12.8); }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m1 > * { left: 20px; }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m2 > * { left: 57px; }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-m3 > * { left: 92px; }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-v1 { display: none; }
  html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-v2 { display: block; left: 75px; } /* v5d : barre remise entre glucides et lipides */
}
/* v5d · aération : 40 unités photo entre le filet du titre « JOURNAL » et les anneaux, 40 entre les anneaux et le trait du bas (translate seul, positions d'origine inchangées) */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-cell { translate: 0 calc(40cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-hr, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-vr, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-mac, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-b { translate: 0 calc(80cqw / 12.8); }
/* v5e · démo seulement : mention « par rapport à ton objectif », dans l'espace entre les anneaux et le trait du bas */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-demo-objectif { left: 50%; top: calc(557cqw / 12.8); transform: translate(-50%, -50%); margin: 0; z-index: 3; white-space: nowrap; pointer-events: none;
  font: italic 400 max(8px, calc(22cqw / 12.8))/1.2 'NA5 Cormorant', 'Cormorant Garamond', Georgia, serif; letter-spacing: .02em; color: rgba(233, 205, 140, .78); }
/* ══ v5f · objectif du jour : rond neutre sans objectif, dépassement, notes « estimé » / « estimation partielle », réglage manuel minimal ══ */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-r3.na5-neutre > .na5-feu, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-r3.na5-neutre > .na5-cendres { display: none; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-r3.na5-halo::after { content: ''; position: absolute; inset: -4%; border-radius: 50%; box-shadow: 0 0 14px 4px rgba(255, 120, 30, .55), inset 0 0 10px 2px rgba(255, 150, 50, .35); pointer-events: none; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-note { left: var(--cx); transform: translate(-50%, -50%); white-space: nowrap; z-index: 3; pointer-events: none;
  font: italic 400 max(7.5px, calc(20cqw / 12.8))/1.2 'NA5 Cormorant', 'Cormorant Garamond', Georgia, serif; color: rgba(233, 205, 140, .8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-note-m { top: calc(405cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-note-b { top: calc(436cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-depasse { top: calc(512cqw / 12.8); /* v5g : sous le rond, dans l'espace avant le trait du bas */ font-style: normal; font-weight: 700; color: #FF9A3C; font-size: max(10px, calc(36cqw / 12.8)); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-r3.na5-neutre ~ .na4-val-feu { opacity: .55; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-regler { left: var(--cx); top: calc(395cqw / 12.8); transform: translate(-50%, -50%); z-index: 6; pointer-events: auto; min-height: 44px; min-width: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: italic 600 max(11px, calc(22cqw / 12.8))/1.1 'NA5 Cormorant', 'Cormorant Garamond', Georgia, serif; color: #F2D58E; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form { left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); z-index: 7; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 10px; background: rgba(8, 7, 6, .94); border: 1px solid rgba(233, 196, 106, .5); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form[hidden] { display: none; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form span { font: 400 9px/1.2 Georgia, serif; color: #E9C46A; display: block; text-align: center; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form input { width: 72px; min-height: 44px; font: 600 16px/1 Georgia, serif; text-align: center; border-radius: 6px; border: 1px solid #B88D3E; background: #111; color: #F2D58E; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form button { min-height: 44px; min-width: 44px; border-radius: 22px; border: 1px solid #B88D3E; background: #1a1408; color: #F2D58E; font: 700 12px/1 Georgia, serif; }
/* v5g : objectif modifiable depuis l'écran (« obj. 1500 », discret, zone de toucher 44 px) */

/* v5h (QC) : le bouton d'objectif ne bouge pas à l'appui (tap-press écrasait translate → clic souris perdu) ; erreur visible dans l'écran */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-regler.tap-press, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-regler.is-pressed, html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-regler:active { transform: translate(-50%, -50%) !important; scale: none !important; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-erreur { font: 600 11px/1.2 Georgia, serif; color: #FFB27A; text-align: center; max-width: 130px; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-erreur[hidden] { display: none; }

/* ══ 27/10 · v6 « anneau de feu complet » (labo flamme) — sprite de l'anneau entier déroulé depuis la photo d'A, alpha par luminance ══ */
/* v6 · anneau de feu = sprite de l'anneau entier déroulé depuis la photo d'A (alpha propre par luminance), révélé de 0° (haut) en sens horaire */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu {
  inset: calc(-67cqw / 12.8); background: url('nutri-anneaux-a5/anneau-flamme.webp') center / 100% 100% no-repeat; mix-blend-mode: screen;
  -webkit-mask: conic-gradient(from 0deg, #000 0 max(0deg, calc(var(--na5-arc) - 10deg)), transparent var(--na5-arc));
  mask: conic-gradient(from 0deg, #000 0 max(0deg, calc(var(--na5-arc) - 10deg)), transparent var(--na5-arc));
  animation: none; transform: none;
}
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu::before, html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu::after { content: none; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-cendres { background: none; -webkit-mask: conic-gradient(#000 0 var(--na5-arc), transparent var(--na5-arc)); mask: conic-gradient(#000 0 var(--na5-arc), transparent var(--na5-arc)); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-braise { -webkit-mask: conic-gradient(transparent 0 var(--na5-arc), #000 calc(var(--na5-arc) + 2deg)); mask: conic-gradient(transparent 0 var(--na5-arc), #000 calc(var(--na5-arc) + 2deg)); }
/* objectif atteint : cercle de feu fermé, sans masque (pas de cran à 12 h) ; seul l'état ≥ 100 % allume le halo extérieur */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3.na5-halo > .na5-feu, html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3.na5-halo > .na5-cendres { -webkit-mask: none; mask: none; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3.na5-halo > .na5-braise { display: none; }
/* halo ≥ 100 % : lueur extérieure seulement (rien de lisse à l'intérieur du cercle) */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-r3.na5-halo::after { inset: 2%; box-shadow: 0 0 16px 3px rgba(255, 110, 25, .38); }
/* braises CSS plus fines : de simples étincelles, comme celles de la photo */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-cendres > i { width: 1.1px; height: 1.1px; margin: -.55px; box-shadow: 0 0 1px .3px rgba(255, 130, 40, .5); }
@media (prefers-reduced-motion: reduce) { html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-cendres > i { opacity: .6; } }
/* D : la partie non brûlée garde l'anneau d'or de la photo (or vif, comme la moitié gauche de la référence) au lieu d'un fond atténué */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-braise { filter: sepia(.2) saturate(.9) brightness(.72); opacity: .55; }
/* E : front de flamme effilé — les 28 derniers degrés ne gardent que la bande (v5h : recalée sur la bande d’or non brûlée, r ≈ 127–150 u, rayon médian 138 u), comme la fin naturelle de la flamme sur la photo */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3:not(.na5-halo) > .na5-feu { /* v5h : fin d'arc en fondu — langues extérieures s'éteignent sur 18°, la bande de feu (recalée sur la bande d'or) fond sur 19° et chevauche l'or de 3° : ni marche, ni trou */
  -webkit-mask: conic-gradient(from 0deg, rgba(0,0,0,.25) 0, #000 6deg, #000 max(6deg, calc(var(--na5-arc) - 26deg)), transparent max(0deg, calc(var(--na5-arc) - 8deg))), radial-gradient(closest-side, transparent 53%, #000 57%, #000 64%, transparent 68%), conic-gradient(from 0deg, rgba(0,0,0,.25) 0, #000 6deg, #000 max(6deg, calc(var(--na5-arc) - 16deg)), transparent calc(var(--na5-arc) + min(3deg, var(--na5-arc))));
  -webkit-mask-composite: source-over, source-in;
  mask: conic-gradient(from 0deg, rgba(0,0,0,.25) 0, #000 6deg, #000 max(6deg, calc(var(--na5-arc) - 26deg)), transparent max(0deg, calc(var(--na5-arc) - 8deg))), radial-gradient(closest-side, transparent 53%, #000 57%, #000 64%, transparent 68%), conic-gradient(from 0deg, rgba(0,0,0,.25) 0, #000 6deg, #000 max(6deg, calc(var(--na5-arc) - 16deg)), transparent calc(var(--na5-arc) + min(3deg, var(--na5-arc))));
  mask-composite: add, intersect;
}
/* B = A + 2e couche du même sprite qui vacille (transform/opacity, CSS seul), figée en mouvement réduit */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu::after { content: ''; position: absolute; inset: 0; background: inherit; mix-blend-mode: screen; opacity: 0; transform-origin: 50% 50%; animation: na6-vacille 2.2s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes na6-vacille { 0% { opacity: 0; transform: scale(1) rotate(0deg); } 100% { opacity: .28; transform: scale(1.018) rotate(.8deg); } }
@media (prefers-reduced-motion: reduce) { html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu::after { animation: none; opacity: 0; } }
/* v5h : bande d'or non brûlée en fondu croisé avec la flamme — reprend sous le bout de flamme (arc − 16° → arc + 3°) et sous le départ à 12 h (−14° → +6°) : pas de trou au début ni à la fin de l'arc */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3:not(.na5-halo) > .na5-braise { -webkit-mask: conic-gradient(from -14deg, #000 0, #000 13deg, transparent 21deg, transparent max(20deg, calc(var(--na5-arc) - 2deg)), #000 calc(var(--na5-arc) + 17deg)); mask: conic-gradient(from -14deg, #000 0, #000 13deg, transparent 21deg, transparent max(20deg, calc(var(--na5-arc) - 2deg)), #000 calc(var(--na5-arc) + 17deg)); }
/* v5h : bande d'or non brûlée recalée sur le rayon réel de la flamme du sprite (même centre, rayon médian −3 %) ; rond vide (0 kcal) : or continu, sans cran à 12 h */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-braise { inset: 1.4%; translate: 0 calc(-2cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3.na5-vide > .na5-braise { -webkit-mask: none; mask: none; }

/* ══ 27/10 · retour A : formulaire « objectif kcal à brûler » — AJOUT SEUL ══
   Avant : colonne étroite centrée sur le rond (86 × 128–171 px) qui sortait du rond et, à 320 px avec l'erreur, du bloc (coupé par overflow: hidden).
   Maintenant : panneau posé sur toute la largeur du bloc (marges 8 px), en lignes ; cibles ≥ 44 px conservées ; bouton « Annuler ». */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form { left: 8px; right: 8px; top: 50%; transform: translateY(-50%); flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; padding: 8px; box-sizing: border-box; max-height: calc(100% - 8px); }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form[hidden] { display: none; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form label { display: flex; flex-direction: column; align-items: center; gap: 2px; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form span { font-size: 11px; white-space: nowrap; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-form .na5-obj-annuler { padding: 0 12px; background: transparent; color: #E9C46A; font-weight: 600; }
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 .na5-obj-erreur { flex: 1 0 100%; max-width: none; }
/* ══ 27/10 · retour A : titre « Journal » ×1,2 — AJOUT SEUL ══ */
html:root:root[data-nutri-anneaux-a="1"] .tr-nutri .na5 h2.na5-titre { left: calc(349cqw / 12.8); top: calc(8cqw / 12.8); width: calc(582cqw / 12.8); height: calc(114cqw / 12.8); }
/* ══ 27/10 · retour A : bande d'or du rond « kcal brûlées » au même diamètre que les deux autres (la braise passe de 97,2 % à 100 % ; flamme agrandie du même facteur 1/0,972, même centre) ; plus d'air libellé ↔ anneau (+28 unités photo) — AJOUT SEUL ══ */
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-braise { inset: 0; }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-r3 > .na5-feu { inset: calc(-73.7cqw / 12.8); }
html:root:root[data-nutri-anneaux-a="1"] .na5 .na5-lab { top: calc(112cqw / 12.8); }