/* Aide brève des pages à décor : enfant fixe avant le contenu défilant.
   Le décor doit réserver une zone basse claire ; ajustement par jeton si besoin. */
.chr-decor-caption{position:relative;z-index:1;flex:none;margin:calc(-1 * var(--chr-decor-caption-overlap,30px)) 0 10px;padding:0 3px;font-size:13px;line-height:19px;color:var(--ink);text-align:left}
/* Le salut est toujours sur la zone claire du décor, indépendamment du thème. */
.greeting h1{color:var(--chr-color-ink);text-shadow:none}
:root {
  color-scheme: light;
  --chr-color-background: #f2f5fd;
  --chr-color-surface: #ffffff;
  --chr-color-bottom-navigation: var(--chr-color-surface);
  --chr-color-sky-surface: #d9eefc;
  --chr-color-journal-header: var(--chr-color-sky-surface);
  --chr-color-ink: #243544;
  --chr-color-ink-on-light: #111111;
  --chr-color-muted: #526271;
  --chr-color-border: #cbd8e3;
  --chr-color-accent: #218fa9;
  --chr-color-butterfly: var(--chr-color-accent);
  --chr-color-cocoon: var(--chr-color-accent);
  --chr-program-refit-surface: #e3e9d0;
  --chr-program-refit-ink: #4f603d;
  --chr-color-calories: #d94f55;
  --chr-color-protein: #4e8fd3;
  --chr-color-carbs: #e878a0;
  --chr-color-fat: #e4bd3f;
  --chr-color-fibre: #69a96f;
  --chr-color-alcohol: #8f6fb5;
  --chr-font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --chr-font-size-body: 16px;
  --chr-font-size-control: 17px;
  --chr-font-size-caption: 12px;
  --chr-font-size-label: 14px;
  --chr-font-size-section: 18px;
  --chr-font-size-page: 24px;
  --chr-line-height-body: 1.5;
  --chr-line-height-title: 1.25;
  --chr-control-height: 56px;
  --chr-field-height: 48px;
  --chr-radius-control: 17px;
  --chr-radius-section: 22px;
  --chr-radius-pill: 999px;
  --chr-space-page: 28px;
  --chr-space-section: 16px;
  --chr-space-stack: 14px;
  --chr-phone-width: 390px;
  --chr-phone-height: 844px;
  --chr-bottom-navigation-z: 40;
  --chr-bottom-navigation-compact-height: 56px;
  --chr-navigation-bottom-space: max(0px, calc(var(--chr-safe-bottom,0px) - 10px));
  --chr-bottom-navigation-height: calc(var(--chr-bottom-navigation-compact-height) + var(--chr-navigation-bottom-space));
  --chr-app-menu-target: 48px;
  --chr-app-menu-gap: 8px;

  /* Aliases provisoires pour les écrans historiques pendant leur migration. */
  --ink: var(--chr-color-ink);
  --paper: var(--chr-color-background);
  --turquoise: var(--chr-color-accent);
  --sage: var(--chr-color-accent);
}

/* Toute surface claire porte son encre au niveau du système visuel commun.
   Les composants descendants héritent de cette valeur et ne la redéfinissent pas. */
.chr-light-surface{color:var(--chr-color-ink-on-light)}

* { box-sizing: border-box; }

/* Retour secondaire partagé : fiche programme et bienvenue. */
.chr-program-return{display:inline-flex;align-items:center;gap:10px;min-height:48px;width:max-content;padding:4px 0;border:0;background:transparent;color:var(--chr-color-ink);font:600 14px/1.2 var(--chr-font-family);cursor:pointer;text-decoration:none}
.chr-program-return__arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--chr-color-surface);box-shadow:0 2px 8px #2030440c;font:400 23px/1 var(--chr-font-family);transition:transform .18s ease}
.chr-program-return:hover .chr-program-return__arrow{transform:translateX(-2px)}
.chr-program-return:focus-visible{outline:2px solid var(--chr-color-accent);outline-offset:4px;border-radius:20px}
@media(prefers-reduced-motion:reduce){.chr-program-return__arrow{transition:none}}

/* Signature de marque : typographie identique, placement et couleur par écran. */
.chr-wordmark {
  font: 400 29px/normal var(--chr-font-family);
  letter-spacing: .13em;
  white-space: nowrap;
}

/* Choix unique réutilisable dans les questionnaires. */
.chr-choice-list { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.chr-field-with-unit { position: relative; }
.chr-number-picker { position: relative; width: 160px; margin: 0 auto; }
.chr-number-picker--labels { width: 100%; }
.chr-number-picker--labels .chr-number-picker__row { font-size: 20px; }
.chr-number-picker--labels .chr-number-picker__row.is-selected { font-size: 25px; }
.chr-number-pair { display: flex; align-items: center; justify-content: center; gap: 8px; }
.chr-number-pair .chr-number-picker { width: 90px; margin: 0; }
.chr-number-pair__separator { font-size: 36px; font-weight: 600; }
.chr-number-pair .chr-number-picker__unit { right: -24px; }
.chr-number-picker__unit { position: absolute; top: 50%; right: -10px; transform: translateY(-50%); font-size: 17px; color: var(--chr-color-muted); pointer-events: none; }
.chr-number-picker__wheel { height: 240px; padding: 96px 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: pan-y; }
.chr-number-picker__wheel::-webkit-scrollbar { display: none; }
.chr-number-picker__wheel:focus-visible { outline: 2px solid var(--chr-color-accent); border-radius: var(--chr-radius-control); }
.chr-number-picker__row { height: 48px; display: grid; place-items: center; scroll-snap-align: center; font-size: 28px; font-weight: 500; color: var(--chr-color-muted); opacity: .35; cursor: pointer; }
.chr-number-picker__row.is-selected { color: var(--chr-color-ink); opacity: 1; font-size: 42px; font-weight: 600; }
.chr-field-with-unit input { padding-right: 64px; }
.chr-text-area { display:block; width:100%; min-height:180px; padding:18px; box-sizing:border-box; resize:vertical; font:400 17px/1.5 var(--chr-font-family); }
.chr-brand-lockup { text-align:left; }
.chr-brand-lockup .chr-wordmark { font-size:32px; }
.chr-brand-lockup__program { display:block; margin-top:4px; color:var(--chr-color-accent); font:500 19px/1.3 var(--chr-font-family); letter-spacing:.08em; }
.chr-quantity-picker { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; }
.chr-quantity-picker .chr-number-picker { width:100%; margin:0; height:144px; }
.chr-quantity-picker .chr-number-picker__wheel { height:144px; padding:48px 0; box-sizing:border-box; }
.chr-quantity-picker .chr-number-picker__row { font-size:20px; }
.chr-quantity-picker .chr-number-picker__row.is-selected { font-size:28px; }
.chr-field-with-unit > span { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); color: var(--chr-color-muted); font-size: 17px; pointer-events: none; }
.chr-choice { position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 17px 18px; border: 1.5px solid var(--chr-color-border); border-radius: var(--chr-radius-control); background: var(--chr-color-surface); cursor: pointer; font-size: 17px; line-height: 1.35; }
.chr-choice input { appearance: none; flex: 0 0 21px; width: 21px; height: 21px; margin: 0; border: 1.5px solid var(--chr-color-muted); border-radius: 50%; }
.chr-choice:has(input:checked) { border-color: var(--chr-color-accent); background: var(--chr-color-sky-surface); }
.chr-choice input:checked { border: 6px solid var(--chr-color-accent); background: var(--chr-color-surface); }
.chr-choice:has(input:focus-visible) { outline: 3px solid var(--chr-color-accent); outline-offset: 3px; }
.chr-choice input[type="checkbox"] { border-radius: 5px; }
.chr-choice input[type="checkbox"]:checked { border: 0; background: var(--chr-color-accent); }
.chr-choice input[type="checkbox"]:checked::after { content: "✓"; display: grid; place-items: center; height: 100%; color: white; font: 700 16px/1 var(--chr-font-family); }
.chr-choice--compact { min-height: 58px; padding: 12px 14px; font-size: 16px; }
.chr-choice small { display: block; margin-top: 3px; color: var(--chr-color-muted); font-size: 13px; line-height: 1.35; }
.chr-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Structure commune des écrans applicatifs : seul le contenu central défile. */
.chr-app-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Le cadre commun est le seul repère vertical des écrans internes.
   Les domaines ne redéfinissent ni la hauteur du viewport, ni la position
   de la navigation basse : cette règle évite les écarts après navigation. */
html:not([data-chr-embedded]) body > .chr-app-frame {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

html[data-chr-embedded] body > .chr-app-frame {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.chr-scroll-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--chr-domain-page,var(--chr-color-background));
}

/* Typographie et grandes zones : une géométrie commune, la couleur vient du domaine. */
.chr-page-kicker{margin:0;color:var(--chr-domain-accent,var(--chr-color-muted));font:600 var(--chr-font-size-caption)/1.35 var(--chr-font-family);letter-spacing:.07em;text-transform:uppercase}
.chr-page-title{margin:0;color:var(--chr-domain-ink,var(--chr-color-ink));font:600 var(--chr-font-size-page)/var(--chr-line-height-title) var(--chr-font-family);letter-spacing:-.015em}
.chr-page-intro{margin:0;color:var(--chr-color-muted);font:400 var(--chr-font-size-body)/var(--chr-line-height-body) var(--chr-font-family)}
.chr-section-title{margin:0;color:var(--chr-domain-ink,var(--chr-color-ink));font:600 var(--chr-font-size-section)/var(--chr-line-height-title) var(--chr-font-family)}
.chr-section-copy{margin:0;color:var(--chr-color-muted);font:400 var(--chr-font-size-label)/1.45 var(--chr-font-family)}

.chr-page-section{
  min-width:0;
  padding:var(--chr-space-section);
  border:1px solid var(--chr-domain-border,var(--chr-color-border));
  border-radius:var(--chr-radius-section);
  background:var(--chr-section-surface,var(--chr-color-surface));
  color:var(--chr-domain-ink,var(--chr-color-ink));
  box-shadow:0 3px 12px rgb(36 53 68 / 4%);
}
.chr-page-section--tinted{--chr-section-surface:var(--chr-domain-soft,var(--chr-color-sky-surface))}
.chr-page-section--flat{box-shadow:none}
/* Traitement transversal des environnements monochromes. La forme est stable ;
   chaque domaine injecte uniquement surface, accent, bordure et encre. */
.chr-page-section--tonal{
  --chr-section-accent:var(--chr-domain-accent,var(--chr-color-accent));
  border-color:color-mix(in srgb,var(--chr-section-accent) 18%,var(--chr-domain-border,var(--chr-color-border)));
  background:linear-gradient(145deg,rgb(255 255 255 / 34%),transparent 60%),var(--chr-section-surface,var(--chr-domain-soft,var(--chr-color-surface)));
  box-shadow:inset 0 3px 0 color-mix(in srgb,var(--chr-section-accent) 14%,transparent),0 5px 14px rgb(36 53 68 / 5%);
}
.chr-page-section--tonal.chr-page-section--flat{box-shadow:inset 0 3px 0 color-mix(in srgb,var(--chr-section-accent) 14%,transparent),0 5px 14px rgb(36 53 68 / 5%)}
.chr-tonal-marker{display:inline-flex;align-items:center;gap:7px}
.chr-tonal-marker::before{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--chr-section-accent,var(--chr-domain-accent,var(--chr-color-accent)));box-shadow:0 0 0 4px rgb(255 255 255 / 38%);content:""}
.chr-tonal-medallion{box-shadow:0 4px 10px rgb(36 53 68 / 8%),inset 0 1px 0 rgb(255 255 255 / 78%)}
.chr-section-icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;overflow:hidden;border:1px solid color-mix(in srgb,var(--chr-section-accent,var(--chr-domain-accent,var(--chr-color-accent))) 14%,transparent);border-radius:16px;background:color-mix(in srgb,var(--chr-section-surface,var(--chr-domain-soft,var(--chr-color-surface))) 28%,#fff);color:var(--chr-section-accent,var(--chr-domain-accent,var(--chr-color-accent)))}
.chr-section-icon>img,.chr-section-icon>svg{display:block;width:30px;height:30px;object-fit:contain}
.chr-page-section__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px}
.chr-page-section__heading{display:grid;min-width:0;gap:3px}
.chr-page-section__body{display:grid;min-width:0;gap:var(--chr-space-stack)}
.chr-page-section__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:16px}

/* Contrat commun des lectures asynchrones : une donnée se met à jour dans
   l’écran déjà construit. Un chargement normal ne doit jamais créer de ligne,
   décaler l’en-tête ou donner l’impression que la page change de place.
   Seules les erreurs, qui demandent une action, deviennent visibles. */
.chr-screen-status{margin:0}
.chr-screen-status[data-state="loading"]{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chr-screen-status[data-state="error"]{margin:0 0 8px;padding:8px 10px;border:1px solid color-mix(in srgb,#c75656 28%,#fff);border-radius:12px;background:#fff4f3;color:#803939;font:500 12px/1.35 var(--chr-font-family)}

/* En-tête de domaine : contenu, couleur et référence viennent du registre client. */
.chr-domain-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;min-height:68px;padding:8px 18px 8px 72px;background:var(--chr-domain-header-surface,var(--chr-domain-surface,var(--chr-color-surface)));color:var(--chr-domain-header-ink,var(--chr-domain-ink,var(--chr-color-ink)))}
.chr-domain-header-copy{display:grid;min-width:0;gap:2px}
.chr-domain-header h1,.chr-domain-header h2{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}
.chr-domain-header h1{font:600 17px/1.1 var(--chr-font-family);letter-spacing:-.005em}
.chr-domain-header h2{font:500 12.5px/1.2 var(--chr-font-family)}
.chr-domain-header .chr-menu-reference{display:block;width:40px;height:40px;object-fit:contain}

/* Menu supérieur partagé : le composant occupe une vraie colonne dans les en-têtes. */
chr-app-menu{display:block;width:var(--chr-app-menu-target);height:var(--chr-app-menu-target);flex:0 0 var(--chr-app-menu-target)}
/* Exception cliente commune : ces deux espaces conservent leur flèche retour. */
.chr-app-frame:has(#main.questionnaire-active) chr-app-menu,
.chr-app-frame:has(#page:not([hidden]) .program-overview) chr-app-menu,
.chr-app-frame:has(#page:not([hidden]) .program-detail) chr-app-menu{display:none!important}
.chr-app-frame>.chr-app-menu-global{position:absolute;z-index:80;top:12px;left:12px}
.chr-app-menu-trigger,.chr-app-menu-close{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;color:var(--chr-color-ink);font:300 29px/1 var(--chr-font-family);cursor:pointer}
.chr-app-menu-trigger{position:relative;background:transparent}
.chr-app-menu-trigger::before{position:absolute;inset:5px;content:"";border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(255,255,255,.52);box-shadow:0 2px 9px rgba(36,53,68,.16);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.chr-app-menu-trigger:active::before{background:rgba(255,255,255,.68)}
.chr-app-menu-close{background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chr-app-menu-trigger svg{position:relative;z-index:1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chr-app-menu-trigger:focus-visible,.chr-app-menu-close:focus-visible,.chr-app-menu-group button:focus-visible,.chr-app-menu-group-title:focus-visible{outline:3px solid var(--chr-color-accent);outline-offset:2px}
.chr-app-menu-veil{position:fixed;z-index:98;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(36,53,68,.25);cursor:pointer}
.chr-app-menu-panel{position:fixed;z-index:99;inset:0 auto 0 0;display:flex;width:min(308px,calc(100% - 40px));height:100%;flex-direction:column;margin:0;padding:0;border:0;border-radius:0 24px 24px 0;background:rgba(255,255,255,.78);color:var(--chr-color-ink);box-shadow:12px 0 36px rgba(36,53,68,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:chr-menu-enter .22s ease-out}
.chr-app-menu-panel[hidden],.chr-app-menu-veil[hidden]{display:none}
.chr-app-menu-header{display:flex;min-height:60px;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 4px}
.chr-app-menu-header strong{font:600 19px/24px var(--chr-font-family)}
.chr-app-menu-close{flex:0 0 48px;background:transparent}
.chr-app-menu-navigation{min-height:0;overflow-y:auto;padding:0 12px 14px;overscroll-behavior:contain}
/* Un rythme commun : les destinations d’un même thème sont compactes ;
   chaque grand thème garde au contraire une respiration nette avant le suivant. */
.chr-app-menu-group{margin:0;padding:0}
.chr-app-menu-group--theme{margin:0;padding:0}
.chr-app-menu-group--qg{padding-bottom:8px}
.chr-app-menu-group--tracking,.chr-app-menu-group--journals,.chr-app-menu-group--calorie-balance,.chr-app-menu-group--evolution,.chr-app-menu-group--food,.chr-app-menu-group--activity{padding:8px 0}
.chr-app-menu-group--personal,.chr-app-menu-group--discover{padding-top:2px}
.chr-app-menu-group h2{margin:0 8px 1px;color:var(--chr-color-muted);font:600 13px/18px var(--chr-font-family)}
.chr-menu-reference{display:block;flex-shrink:0;object-fit:contain;aspect-ratio:1;background:transparent;border:0;border-radius:0;padding:0;filter:none}
.chr-app-menu-group+.chr-app-menu-group{border-top:1px solid #24354420;padding-top:7px;margin-top:7px}
.chr-app-menu-domain-heading{display:flex;align-items:center;min-height:44px}
.chr-app-menu-domain-link{display:flex;min-width:0;min-height:44px;flex:1;align-items:center;gap:8px;padding:2px 8px;color:var(--chr-color-ink);font:500 14px/20px var(--chr-font-family);text-align:left;cursor:pointer}
.chr-app-menu-domain-label{display:flex;min-width:0;min-height:44px;flex:1;align-items:center;gap:8px;padding:2px 8px;color:var(--chr-color-ink);font:500 14px/20px var(--chr-font-family)}
.chr-app-menu-open-affordance,.chr-app-menu-triangle{display:grid;width:24px;height:24px;flex:0 0 24px;place-items:center;border:1px solid #24354426;border-radius:50%;color:var(--chr-color-muted);background:transparent}
.chr-app-menu-domain-link--expand-only .chr-app-menu-triangle{margin-left:auto}
.chr-app-menu-open-affordance svg,.chr-app-menu-domain-toggle svg,.chr-app-menu-domain-link--expand-only svg{width:12px;height:12px;fill:currentColor;stroke:none}
.chr-app-menu-domain-open,.chr-app-menu-domain-toggle{display:grid;width:36px;height:44px;flex:0 0 36px;place-items:center;padding:0;color:var(--chr-color-muted);background:transparent;cursor:pointer}
.chr-app-menu-domain-open{margin-left:0}
.chr-app-menu-domain-toggle{margin-left:2px}
.chr-app-menu-domain-toggle span{transition:transform .16s ease}
.chr-app-menu-domain-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.chr-app-menu-domain-link--expand-only span:last-child{transition:transform .16s ease}
.chr-app-menu-domain-link--expand-only[aria-expanded="true"] span:last-child{transform:rotate(180deg)}
.chr-app-menu-group-status{display:flex;align-items:center;gap:8px;min-height:36px;padding:1px 8px;color:var(--chr-color-ink);font:500 14px/20px var(--chr-font-family)}
.chr-app-menu-group-status:has(.chr-menu-reference){min-height:44px}
.chr-app-menu-group-status small{margin-left:auto;color:var(--chr-color-muted);font:400 12px/16px var(--chr-font-family)}
.chr-app-menu-group .chr-app-menu-entry{display:flex;align-items:center;gap:8px;min-height:44px;width:100%;padding:2px 8px;border:0;background:transparent;color:var(--chr-color-ink);text-align:left;font:400 14px/20px var(--chr-font-family)}
.chr-app-menu-group .chr-app-menu-entry--domain{font-weight:500}
.chr-app-menu-domain>div:last-child{padding-left:16px}
.chr-app-menu-domain>div:last-child .chr-app-menu-entry{min-height:34px;padding-top:1px;padding-bottom:1px;font-size:13px}
.chr-app-menu-domain>div:last-child .chr-menu-reference{width:24px;height:24px}
.chr-app-menu-entry small{font-size:10px;margin-left:auto}
.chr-app-menu-group h2:has(.chr-menu-reference){display:flex;align-items:center;gap:8px}
.chr-app-menu-group-title{display:flex;width:100%;min-height:28px;align-items:center;gap:8px;margin:0;padding:2px 8px;border:0;background:transparent;color:var(--chr-color-muted);font:600 13px/18px var(--chr-font-family);text-align:left;cursor:pointer}
.chr-app-menu-group-title:has(.chr-menu-reference){min-height:44px}
.chr-app-menu-group>div>button{display:block;width:100%;min-height:30px;padding:1px 10px 1px 30px;border:0;border-radius:8px;background:transparent;color:var(--chr-color-ink);font:400 14px/18px var(--chr-font-family);text-align:left;cursor:pointer}
.chr-app-menu-group button:disabled{color:#849097;cursor:default;opacity:.58}
.chr-app-menu-is-open{overflow:hidden}
@keyframes chr-menu-enter{from{transform:translateX(-100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.chr-app-menu-panel{animation:none}}
@media(prefers-reduced-transparency:reduce){.chr-app-menu-trigger::before{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}.chr-app-menu-panel{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

.chr-bottom-navigation {
  position: relative;
  z-index: var(--chr-bottom-navigation-z);
  flex: 0 0 auto;
  width: 100%;
  background: var(--chr-color-bottom-navigation);
}

/* Navigation principale : un composant identique sur tous les écrans internes. */
chr-primary-navigation {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
}

/* Règle commune : navigation des espaces, sans interrompre une tâche guidée. */
.chr-app-frame:has(#main.questionnaire-active)>chr-primary-navigation,
.chr-app-frame:not(.is-food-library-mode):has(.refit-meal-entry.is-open)>chr-primary-navigation,
.chr-app-frame.is-session-active>chr-primary-navigation{display:none!important}

.chr-primary-navigation {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  height: var(--chr-bottom-navigation-height);
  padding: 2px 4px calc(4px + var(--chr-navigation-bottom-space));
  border-top: 1px solid #e0e5ed;
  background: var(--chr-color-bottom-navigation);
}

.chr-primary-navigation-item {
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 1px;
  border: 0;
  background: transparent;
  color: #8a98a8;
  font: inherit;
  font-size: .69rem;
  line-height: 1;
}

/* Décalage visuel seul : ni la hauteur du bandeau ni les cibles ne bougent. */
.chr-primary-navigation-item > * {
  position: relative;
  top: 5px;
}

.chr-primary-navigation-item.is-active {
  color: #000;
  font-weight: 700;
}

.chr-primary-navigation-item .chr-menu-reference {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.chr-navigation-icon {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: currentColor;
  -webkit-mask: var(--chr-navigation-icon) center / contain no-repeat;
  mask: var(--chr-navigation-icon) center / contain no-repeat;
}

.chr-icon-today { --chr-navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M3 10 12 3l9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E"); }
.chr-icon-journal { --chr-navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='15' height='18' rx='2'/%3E%3Cpath d='M3 7h4M3 12h4M3 17h4M10 8h6M10 12h6M10 16h4'/%3E%3C/g%3E%3C/svg%3E"); }
.chr-icon-programmes { --chr-navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/g%3E%3C/svg%3E"); }
.chr-icon-academy { --chr-navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 10 10-5 10 5-10 5Z'/%3E%3Cpath d='M6 12v5c3.3 2.7 8.7 2.7 12 0v-5M22 10v6'/%3E%3C/g%3E%3C/svg%3E"); }
.chr-icon-profile { --chr-navigation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"); }

.chr-primary-navigation-item.is-active .chr-navigation-icon {
  transform: scale(1.04);
}

/* Action d’ajout commune : cible tactile de 44 px, disque visible de 32 px. */
.chr-add-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.chr-add-button::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #27384b;
  box-shadow: 0 1px 3px rgba(36,53,68,.14);
}

.chr-add-button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(currentColor,currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center / 2px 14px no-repeat;
}

.chr-add-button:focus-visible {
  outline: 3px solid var(--chr-color-accent);
  outline-offset: 1px;
  border-radius: 50%;
}

.chr-screen,
.phone {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--chr-color-background);
  color: var(--chr-color-ink);
  font-family: var(--chr-font-family);
}

.status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 27px;
  font: 600 14px system-ui, sans-serif;
}

.island {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 94px;
  height: 25px;
  border-radius: 20px;
  background: #17212a;
}

.signals { display: flex; align-items: center; gap: 6px; }
.bars { font-size: 13px; letter-spacing: -2px; }
.battery { border: 1.5px solid currentColor; padding: 1px 3px; border-radius: 4px; font-size: 9px; }
.home { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 122px; height: 5px; border-radius: 5px; background: #17212a; }

.chr-primary-action {
  width: 100%;
  min-height: var(--chr-control-height);
  border: 0;
  border-radius: var(--chr-radius-pill);
  background: var(--chr-action-color,var(--chr-domain-accent,var(--chr-color-ink)));
  color: #fff;
  box-shadow: 0 5px 15px rgb(36 53 68 / 7%);
  font: 600 var(--chr-font-size-control) var(--chr-font-family);
  cursor: pointer;
}

/* Primitives transversales : contrat dans docs/CODEX-DESIGN-SYSTEM-CHRYSALISS.md.
   La composition et les états métier appartiennent aux écrans consommateurs. */
.chr-secondary-action,
.chr-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 18px;
  border: 1px solid var(--chr-domain-border,var(--chr-color-border));
  border-radius: var(--chr-radius-pill);
  background: var(--chr-color-surface);
  color: var(--chr-color-ink);
  font: 500 var(--chr-font-size-control)/1.3 var(--chr-font-family);
  text-align: center;
  cursor: pointer;
}
.chr-secondary-action { width: 100%; min-height: var(--chr-control-height); }
.chr-action-pill { width: auto; min-height: 44px; padding: 8px 14px; font-size: 14px; }
.chr-action-pill[aria-pressed="true"] {
  border-color: var(--chr-domain-accent,var(--chr-color-accent));
  background: var(--chr-domain-soft,var(--chr-color-sky-surface));
}
.chr-icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--chr-color-ink);
  cursor: pointer;
}
.chr-icon-button::before {
  position: absolute;
  inset: 5px;
  border: 1px solid var(--chr-color-border);
  border-radius: 50%;
  background: var(--chr-color-surface);
  content: "";
}
.chr-icon-button > svg {
  position: relative;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.chr-secondary-action,.chr-action-pill):not(:disabled):active,
.chr-icon-button:not(:disabled):active::before { background: var(--chr-color-sky-surface); }
:is(.chr-primary-action,.chr-secondary-action,.chr-action-pill,.chr-icon-button):disabled {
  opacity: .45;
  cursor: default;
}

/* Enveloppe visuelle seulement : employer un <dialog> natif et showModal(). */
dialog.chr-bottom-sheet {
  width: min(var(--chr-phone-width),calc(100% - 28px));
  max-width: calc(100% - 28px);
  max-height: calc(100dvh - 28px - env(safe-area-inset-top));
  margin: auto auto max(14px,env(safe-area-inset-bottom));
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--chr-color-border);
  border-radius: 22px;
  background: var(--chr-color-surface);
  color: var(--chr-color-ink);
  box-shadow: 0 18px 60px rgb(36 53 68 / 28%);
  font: 400 var(--chr-font-size-body)/1.45 var(--chr-font-family);
}
dialog.chr-bottom-sheet:not([open]) { display: none; }
dialog.chr-bottom-sheet[open] { display: grid; gap: 16px; }
dialog.chr-bottom-sheet::backdrop { background: rgb(36 53 68 / 34%); }
.chr-bottom-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chr-bottom-sheet__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.chr-bottom-sheet__body { min-width: 0; }
.chr-bottom-sheet__body p { margin: 0; }
.chr-bottom-sheet__actions { display: grid; gap: 10px; }

/* Fenêtre de choix centrée : mise en forme validée par Karine pour « Que
   s'est-il passé ? » (Journal, journal.css), rendue commune le 2 octobre 2026
   à l'identique. Employer un <dialog> natif et showModal(). */
dialog.chr-choice-dialog{box-sizing:border-box;width:min(360px,calc(100% - 28px));max-height:min(580px,calc(100% - 36px));padding:0;border:0;border-radius:22px;background:#fff;color:#263a42;box-shadow:0 22px 70px rgba(28,43,49,.26);font-family:var(--chr-font-family)}
dialog.chr-choice-dialog::backdrop{background:rgba(31,44,49,.42);backdrop-filter:blur(3px)}
.chr-choice-dialog__shell{display:grid;gap:15px;padding:20px}
.chr-choice-dialog__shell>header{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:start;gap:12px}
.chr-choice-dialog__shell>header small{display:block;margin-bottom:3px;color:#76868c;font-size:.7rem}
.chr-choice-dialog__shell h2{margin:0;font-size:1.12rem;font-weight:600;line-height:1.2}
.chr-choice-dialog__close{width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#f1f4f4;color:#52646b;font:300 1.5rem/1 var(--chr-font-family);cursor:pointer}
.chr-choice-dialog__choices{display:grid;gap:8px}
.chr-choice-dialog__choices button{width:100%;min-height:46px;padding:10px 13px;border:1px solid #dce3e5;border-radius:13px;background:#f7f9f9;color:#33474f;font:500 .78rem/1.25 var(--chr-font-family);text-align:left;cursor:pointer}
.chr-choice-dialog__choices button:disabled{opacity:.55;cursor:wait}

.chr-text-field {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 18px;
  border: 1px solid var(--chr-color-border);
  border-radius: var(--chr-radius-control);
  background: var(--chr-color-surface);
  color: var(--chr-color-ink);
  font: 500 19px var(--chr-font-family);
}

.chr-text-field::placeholder { color: #8794a2; font-weight: 400; }
.chr-feedback { min-height: 42px; margin-top: 15px; color: var(--chr-color-muted); font-size: 14px; line-height: 1.45; }

/* Champs de saisie : le même contrat couvre texte, nombre, sélection et zone longue. */
.chr-form-field{display:grid;min-width:0;gap:7px}
.chr-field-label{color:var(--chr-domain-ink,var(--chr-color-ink));font:600 var(--chr-font-size-label)/1.35 var(--chr-font-family)}
.chr-field-help{margin:0;color:var(--chr-color-muted);font:400 var(--chr-font-size-caption)/1.4 var(--chr-font-family)}
.chr-form-control{
  width:100%;
  min-width:0;
  min-height:var(--chr-field-height);
  padding:10px 13px;
  border:1px solid var(--chr-domain-border,var(--chr-color-border));
  border-radius:14px;
  background:var(--chr-color-surface);
  color:var(--chr-domain-ink,var(--chr-color-ink));
  font:500 16px/1.35 var(--chr-font-family);
}
textarea.chr-form-control{min-height:120px;resize:vertical;line-height:1.5}
select.chr-form-control{padding-right:34px}
.chr-form-control::placeholder{color:#7C8A94;font-weight:400;opacity:1}
.chr-form-control:disabled{background:color-mix(in srgb,var(--chr-domain-soft,var(--chr-color-background)) 58%,#fff);color:var(--chr-color-muted);opacity:1}
.chr-form-control[aria-invalid="true"]{border-color:#A24747}
.chr-field-error{margin:0;color:#8B3535;font:500 var(--chr-font-size-caption)/1.4 var(--chr-font-family)}

.butterfly { color: var(--chr-color-butterfly); }
.wing { transform-box: fill-box; transform-origin: right center; }
.right-wing { transform-origin: left center; }
@keyframes chr-flap { 50% { transform: scaleX(.25); } }
@keyframes chr-land { from { opacity: 0; transform: translate(28px,-26px) rotate(18deg); } to { opacity: 1; transform: none; } }

:is(a,button,input,textarea,select):focus-visible {
  outline: 3px solid var(--chr-domain-accent,var(--chr-color-accent));
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .wing { animation: none !important; }
  .butterfly { animation: none !important; }
}

/* Composant unique des quatre cadrans macros : Today, Journal et détail d’un repas. */
.chr-macro-rings { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.chr-macro-ring { --chr-macro-color: #6f7e83; --chr-macro-overflow-color: #405057; --chr-macro-ring-center: #fff; display: grid; justify-items: center; gap: 7px; min-width: 0; text-align: center; }
.chr-macro-ring.chr-macro-protein { --chr-macro-color: var(--chr-color-protein); --chr-macro-overflow-color: #285f9e; }
.chr-macro-ring.chr-macro-fat { --chr-macro-color: var(--chr-color-fat); --chr-macro-overflow-color: #a97908; }
.chr-macro-ring.chr-macro-carbs { --chr-macro-color: var(--chr-color-carbs); --chr-macro-overflow-color: #b83d69; }
.chr-macro-ring.chr-macro-fibre { --chr-macro-color: var(--chr-color-fibre); --chr-macro-overflow-color: #397b40; }
.chr-macro-ring-visual { position: relative; box-sizing: border-box; display: grid; width: min(68px,100%); aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--chr-macro-color) 0 var(--chr-macro-progress,0%),color-mix(in srgb,var(--chr-macro-color) 22%,#fff) var(--chr-macro-progress,0%) 100%); }
.chr-macro-ring.is-over .chr-macro-ring-visual { background: conic-gradient(var(--chr-macro-overflow-color) 0 var(--chr-macro-overflow,0%),var(--chr-macro-color) var(--chr-macro-overflow,0%) 100%); }
.chr-macro-ring.is-target-missing .chr-macro-ring-visual { background: color-mix(in srgb,var(--chr-macro-color) 22%,#fff); }
.chr-macro-ring-visual::before { position: absolute; inset: 7px; border-radius: 50%; background: var(--chr-macro-ring-center); content: ""; }
.chr-macro-ring-center { position: relative; z-index: 1; display: grid; justify-items: center; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chr-macro-ring-center > [data-macro-ring-value] { font-size: 1rem; font-weight: 550; }
.chr-macro-ring-center small { margin-top: 1px; color: #718086; font-size: .66rem; font-weight: 500; }
.chr-macro-ring-center small [data-macro-ring-target] { font: inherit; }
.chr-macro-ring-label { max-width: 100%; overflow: hidden; font-size: .72rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

/* Collections d’actions : 1–3 bandeaux ; dès 4 cartes visibles, carrés sur deux colonnes.
   Les éléments masqués avec hidden ne comptent pas. Le contenu peut agrandir
   un carré si nécessaire (texte agrandi), sans jamais couper un libellé. */
.chr-action-collection {
  display:grid; grid-template-columns:minmax(0,1fr); gap:14px;
  --chr-action-ratio:auto;
  --chr-action-padding:20px 20px 20px 80px;
  --chr-action-icon-position:absolute;
  --chr-action-icon-margin:0;
}
.chr-action-collection:has(> :nth-child(4 of :not([hidden]))) {
  grid-template-columns:repeat(2,minmax(0,1fr));
  --chr-action-ratio:1;
  --chr-action-padding:16px;
  --chr-action-icon-position:static;
  --chr-action-icon-margin:0 0 12px;
}
.chr-action-collection > :not([hidden]) { aspect-ratio:var(--chr-action-ratio); min-width:0; }
.chr-action-collection > [hidden] { display:none; }

/* Relief réservé aux cartes cliquables. chr-clickable-card est l’opt-in commun.
   Les deux sélecteurs historiques désignent les cartes QG et activité existantes.
   Aucun bouton ordinaire, menu ou filtre n'hérite du relief. */
:root{--chr-button-relief:inset 0 1px 0 #ffffffa6,inset 0 -2px 0 #233b4614,0 4px 0 #233b4633,0 8px 14px #233b4617;--chr-button-relief-pressed:inset 0 1px 3px #233b4624,0 1px 0 #233b4633,0 3px 6px #233b4614}
button,.chr-raised-button {box-shadow:none !important;background-image:none !important;}
.chr-tonal-action:not(:disabled){box-shadow:0 4px 9px rgb(36 53 68 / 13%) !important;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.chr-tonal-action:not(:disabled):active{transform:translateY(1px);box-shadow:0 2px 5px rgb(36 53 68 / 12%) !important;filter:saturate(1.06)}
:is(.chr-clickable-card,button.activity-action-card,#home button.task):not([data-chr-relief="none"]) {
  background-image:linear-gradient(160deg,#ffffff35,transparent 55%) !important;
  box-shadow:var(--chr-button-relief) !important;
  transition:transform .12s ease,box-shadow .12s ease;
}
@media(hover:hover) and (pointer:fine){
  :is(.chr-clickable-card,button.activity-action-card,#home button.task):not([data-chr-relief="none"]):not(:disabled):hover {filter:brightness(1.025);}
}
:is(.chr-clickable-card,button.activity-action-card,#home button.task):not([data-chr-relief="none"]):not(:disabled):active {
  transform:translateY(3px);
  box-shadow:var(--chr-button-relief-pressed) !important;
}
@media(prefers-reduced-motion:reduce){
  :is(.chr-clickable-card,button.activity-action-card,#home button.task),.chr-tonal-action{transition:none;}
  :is(.chr-clickable-card,button.activity-action-card,#home button.task):active,.chr-tonal-action:active{transform:none;}
}
/* Menu sans cartes ni cadres ; le focus clavier reste visible via outline. */
.chr-app-menu-domain,.chr-app-menu-domain>div,.chr-app-menu-domain-heading{border:0!important;background:transparent!important;box-shadow:none!important;}
.chr-app-menu-panel button{border:0!important;background-color:transparent!important;box-shadow:none!important;background-image:none!important;transform:none!important;}
.chr-app-menu-entry{background:transparent!important;}
.chr-app-menu-trigger::before,.chr-program-return__arrow{box-shadow:none!important;}
#refit-journal-compact .refit-meal-food-card,#refit-journal-compact .refit-date-nav,#refit-journal-compact .refit-date-nav>div{box-shadow:none!important;}

/* Navigation hiérarchique : toujours des lignes, indépendante du nombre d’actions. */
.chr-subsection-list{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:4px 3px 12px;min-width:0}
.questionnaire-page .chr-subsection-list>.chr-subsection-button{--chr-subsection-ink:var(--chr-color-ink-on-light);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;width:100%;min-height:72px;aspect-ratio:auto;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--block-color,var(--chr-color-ink)) 55%,white);color:var(--chr-subsection-ink);border:0}
.chr-subsection-list>.chr-subsection-button strong{grid-column:1;font-size:15px;line-height:1.3;color:inherit}
.chr-subsection-list>.chr-subsection-button small{grid-column:1;margin:0;font-size:12px;line-height:1.3;color:inherit}
.chr-subsection-button .chr-subsection-chevron{grid-column:2;grid-row:1/3;font-size:24px;line-height:1;color:inherit;background:color-mix(in srgb,var(--block-color,var(--chr-color-ink)) 25%,white);width:30px;height:30px;display:grid;place-items:center;border-radius:50%}
.chr-subsection-header{flex:none;display:flex;align-items:center;padding:4px 3px 18px;margin-bottom:8px;border-bottom:1px solid #24354418}