/* Miamento — l'habillage « L'anneau ». Un anneau pour ce qu'il reste, des cartes arrondies, une
   couleur par case, sans emoji. La couleur dit de quelle case on parle, jamais si c'est bien ou mal.

   Les thèmes (décision de Michael du 03/10/2026) : chacun choisit dans son profil le thème (Ciel,
   Azur, Lagon, Pop) et le mode (clair, sombre, ou Auto, qui suit le téléphone). theme.js les pose
   sur <html> avant le premier dessin : data-palette et data-mode. Un bloc de couleurs par thème et
   par mode, avec les mêmes variables (tests/test_journee.mjs le vérifie). Les blocs valent sur
   tout élément qui porte data-palette : les pastilles du profil montrent chaque thème dans ses
   propres couleurs. Un thème en plus : son nom dans THEMES (src/regles.js) et dans
   web/textes/fr.js, ses deux blocs ici. */
@font-face {
  font-family: "Nunito";
  src: url("/polices/nunito.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

/* « only » : le navigateur ne repeint pas nos couleurs avec son propre mode sombre (Chrome, Samsung
   Internet…). Le clair et le sombre sont ceux que la personne a choisis. */
:root { color-scheme: light dark only; }
[data-mode="clair"] { color-scheme: only light; }
[data-mode="sombre"] { color-scheme: only dark; }

/* ───────────────────────── Ciel : un bleu ciel doux, sans mauve (Émilie et Michael, 01/10/2026). Le thème de départ. */
:root, [data-palette="ciel"] {
  --fond: #F3F8FD; --fond-haut: #DCEBFA; --panneau-bas: #D2E5F8; --carte: #FFFFFF; --quai: #FFFFFF;
  --encre: #1E3550; --doux: #5A7089; --trait: #DCE8F3; --piste: #E3EEF8; --lisere: transparent;
  --lien: #2463B8; --alerte: #A8322A; --sur-encre: #F3F8FD; --voile: rgba(30, 53, 80, .42);
  --accent: #1E3550; --sur-accent: #F3F8FD;     /* le bouton principal */
  --bouton: #D3EAF9; --sur-bouton: #17406E;     /* les quatre boutons du bas, d'une seule couleur */
  --profil-a: #C4E2FB; --profil-b: #86BEEF; --profil-encre: #1E3550;
  --ombre: 0 1px 2px rgba(40, 80, 130, .06), 0 10px 24px -14px rgba(40, 80, 130, .28);
  --ombre-plat: 0 2px 4px rgba(40, 80, 130, .06), 0 22px 44px -20px rgba(40, 80, 130, .38);
  --ombre-quai: 0 2px 6px rgba(40, 80, 130, .10), 0 20px 44px -12px rgba(40, 80, 130, .40);
  --c-dejeuner: #F2B54A;   --t-dejeuner: #FCEBC5;
  --c-dix_heures: #F29A6B; --t-dix_heures: #FCDDCB;
  --c-diner: #EE7C7C;      --t-diner: #FBD6D6;
  --c-gouter: #5FB4E8;     --t-gouter: #D3EAF9;
  --c-souper: #3F7FD6;     --t-souper: #D2E0F6;
  --c-grignotage: #45BFA9; --t-grignotage: #CDEEE7;
}
[data-palette="ciel"][data-mode="sombre"] {
  --fond: #0F1B2B; --fond-haut: #182B42; --panneau-bas: #14253A; --carte: #1B2E46; --quai: #233A56;
  --encre: #EAF2FB; --doux: #A9BCD1; --trait: #2B425F; --piste: #2B425F; --lisere: rgba(255, 255, 255, .07);
  --lien: #8FC2F5; --alerte: #FF9C8D; --sur-encre: #12243A; --voile: rgba(4, 9, 16, .62);
  --accent: #EAF2FB; --sur-accent: #12243A;
  --bouton: #2E5078; --sur-bouton: #EAF2FB;
  --profil-a: #A9D3F7; --profil-b: #6FAEE6; --profil-encre: #12243A;
  --ombre: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 24px -14px rgba(0, 0, 0, .70);
  --ombre-plat: 0 2px 4px rgba(0, 0, 0, .30), 0 22px 44px -20px rgba(0, 0, 0, .85);
  --ombre-quai: 0 2px 6px rgba(0, 0, 0, .40), 0 20px 44px -12px rgba(0, 0, 0, .85);
  --c-dejeuner: #F7C766;   --t-dejeuner: #4D3D18;
  --c-dix_heures: #F7AC84; --t-dix_heures: #4F2F20;
  --c-diner: #F59595;      --t-diner: #4E2626;
  --c-gouter: #7CC6F2;     --t-gouter: #1D4159;
  --c-souper: #6FA2EC;     --t-souper: #213A63;
  --c-grignotage: #63D3BE; --t-grignotage: #17463E;
}

/* ───────────────────────── Azur : un ciel d'été. Bleu franc et lumineux, blancs nets, cases en couleurs vives. */
[data-palette="azur"] {
  --fond: #F4F9FF; --fond-haut: #BFDDFF; --panneau-bas: #A9D0FF; --carte: #FFFFFF; --quai: #FFFFFF;
  --encre: #0E2A5C; --doux: #47648F; --trait: #D3E5FB; --piste: #DCEBFD; --lisere: transparent;
  --lien: #0B5FD6; --alerte: #B3261E; --sur-encre: #FFFFFF; --voile: rgba(14, 42, 92, .45);
  --accent: #146BE6; --sur-accent: #FFFFFF;
  --bouton: #D9EAFF; --sur-bouton: #0B4AA8;
  --profil-a: #8CCBFF; --profil-b: #2B82F6; --profil-encre: #06204D;
  --ombre: 0 1px 2px rgba(20, 90, 200, .08), 0 10px 24px -14px rgba(20, 90, 200, .34);
  --ombre-plat: 0 2px 4px rgba(20, 90, 200, .08), 0 22px 44px -20px rgba(20, 90, 200, .46);
  --ombre-quai: 0 2px 6px rgba(20, 90, 200, .12), 0 20px 44px -12px rgba(20, 90, 200, .46);
  --c-dejeuner: #FFB400;   --t-dejeuner: #FFEDB8;
  --c-dix_heures: #FF8A3D; --t-dix_heures: #FFDFC8;
  --c-diner: #FF5C6C;      --t-diner: #FFD4D9;
  --c-gouter: #19A7F2;     --t-gouter: #CCEBFD;
  --c-souper: #3D5AF1;     --t-souper: #D7DEFD;
  --c-grignotage: #12C2A0; --t-grignotage: #C5F3EA;
}
[data-palette="azur"][data-mode="sombre"] {
  --fond: #071630; --fond-haut: #0F2A5E; --panneau-bas: #0B2150; --carte: #102B5F; --quai: #163674;
  --encre: #F2F7FF; --doux: #AEC6EC; --trait: #204080; --piste: #1E3D7A; --lisere: rgba(255, 255, 255, .08);
  --lien: #8CC0FF; --alerte: #FF9C8D; --sur-encre: #071630; --voile: rgba(2, 7, 18, .66);
  --accent: #5AA5FF; --sur-accent: #04122C;
  --bouton: #1D4797; --sur-bouton: #EAF3FF;
  --profil-a: #8CCBFF; --profil-b: #3D8DF7; --profil-encre: #04122C;
  --ombre: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 24px -14px rgba(0, 0, 0, .70);
  --ombre-plat: 0 2px 4px rgba(0, 0, 0, .30), 0 22px 44px -20px rgba(0, 0, 0, .85);
  --ombre-quai: 0 2px 6px rgba(0, 0, 0, .40), 0 20px 44px -12px rgba(0, 0, 0, .85);
  --c-dejeuner: #FFC53D;   --t-dejeuner: #4C3B10;
  --c-dix_heures: #FF9E5E; --t-dix_heures: #4F2B15;
  --c-diner: #FF7B88;      --t-diner: #51202A;
  --c-gouter: #4DBEFF;     --t-gouter: #0F3D61;
  --c-souper: #8198FF;     --t-souper: #223079;
  --c-grignotage: #3FDDBE; --t-grignotage: #0D4B42;
}

/* ───────────────────────── Lagon : turquoise et mer chaude. Plus vert que le ciel, cases aux couleurs de fruits. */
[data-palette="lagon"] {
  --fond: #F1FBFC; --fond-haut: #B5EDF1; --panneau-bas: #9FE3EA; --carte: #FFFFFF; --quai: #FFFFFF;
  --encre: #06364A; --doux: #3C6978; --trait: #CDEBEF; --piste: #D6F1F4; --lisere: transparent;
  --lien: #00758A; --alerte: #B3261E; --sur-encre: #FFFFFF; --voile: rgba(6, 54, 74, .45);
  --accent: #007E96; --sur-accent: #FFFFFF;
  --bouton: #CDF1F5; --sur-bouton: #05566A;
  --profil-a: #8BE6EC; --profil-b: #14B3CB; --profil-encre: #042E3B;
  --ombre: 0 1px 2px rgba(0, 110, 130, .08), 0 10px 24px -14px rgba(0, 110, 130, .36);
  --ombre-plat: 0 2px 4px rgba(0, 110, 130, .08), 0 22px 44px -20px rgba(0, 110, 130, .48);
  --ombre-quai: 0 2px 6px rgba(0, 110, 130, .12), 0 20px 44px -12px rgba(0, 110, 130, .48);
  --c-dejeuner: #FFB703;   --t-dejeuner: #FFECB6;
  --c-dix_heures: #FB8B24; --t-dix_heures: #FEDEC0;
  --c-diner: #F25C78;      --t-diner: #FDD4DC;
  --c-gouter: #1FB6D6;     --t-gouter: #C8EEF6;
  --c-souper: #2E7DF2;     --t-souper: #D3E4FD;
  --c-grignotage: #7BC62D; --t-grignotage: #DFF2C7;
}
[data-palette="lagon"][data-mode="sombre"] {
  --fond: #04222C; --fond-haut: #083E50; --panneau-bas: #063545; --carte: #0A3F51; --quai: #0E4D62;
  --encre: #EFFBFD; --doux: #A3CDD8; --trait: #145C72; --piste: #13566B; --lisere: rgba(255, 255, 255, .08);
  --lien: #74DFEE; --alerte: #FF9C8D; --sur-encre: #04222C; --voile: rgba(1, 10, 14, .66);
  --accent: #34CEE2; --sur-accent: #03222B;
  --bouton: #106378; --sur-bouton: #E8FAFD;
  --profil-a: #8BE6EC; --profil-b: #23BDD4; --profil-encre: #03222B;
  --ombre: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 24px -14px rgba(0, 0, 0, .70);
  --ombre-plat: 0 2px 4px rgba(0, 0, 0, .30), 0 22px 44px -20px rgba(0, 0, 0, .85);
  --ombre-quai: 0 2px 6px rgba(0, 0, 0, .40), 0 20px 44px -12px rgba(0, 0, 0, .85);
  --c-dejeuner: #FFC53D;   --t-dejeuner: #4B3B0E;
  --c-dix_heures: #FFA552; --t-dix_heures: #4E2C10;
  --c-diner: #FF8098;      --t-diner: #51202C;
  --c-gouter: #4FD4EC;     --t-gouter: #0B4957;
  --c-souper: #74AAFF;     --t-souper: #14366D;
  --c-grignotage: #A2DD5A; --t-grignotage: #2D4A12;
}

/* ───────────────────────── Pop : la plus colorée. Fond blanc, le compteur dans un grand bloc bleu vif, boutons pleins. */
[data-palette="pop"] {
  --fond: #F7F9FF; --fond-haut: #F7F9FF; --panneau-bas: #F7F9FF; --carte: #FFFFFF; --quai: #FFFFFF;
  --encre: #111C44; --doux: #55618A; --trait: #DDE4FA; --piste: #E4EAFB; --lisere: transparent;
  --lien: #2459E0; --alerte: #B3261E; --sur-encre: #FFFFFF; --voile: rgba(17, 28, 68, .48);
  --accent: #2A5FEB; --sur-accent: #FFFFFF;
  --bouton: #2A5FEB; --sur-bouton: #FFFFFF;
  --bloc: linear-gradient(150deg, #2A5FEB 0%, #2B7DF0 62%, #1E90EE 100%); --sur-bloc: #FFFFFF; --sur-bloc-doux: rgba(255, 255, 255, .88);
  --profil-a: #FFD23F; --profil-b: #FF9F1C; --profil-encre: #3A2400;
  --ombre: 0 1px 2px rgba(42, 95, 235, .08), 0 10px 24px -14px rgba(42, 95, 235, .34);
  --ombre-plat: 0 2px 4px rgba(42, 95, 235, .10), 0 22px 44px -20px rgba(42, 95, 235, .55);
  --ombre-quai: 0 2px 6px rgba(42, 95, 235, .12), 0 20px 44px -12px rgba(42, 95, 235, .46);
  --c-dejeuner: #FFC107;   --t-dejeuner: #FFF0BF;
  --c-dix_heures: #FF8A00; --t-dix_heures: #FFE1C0;
  --c-diner: #FF4D6D;      --t-diner: #FFD1DA;
  --c-gouter: #00B4F0;     --t-gouter: #C6EEFD;
  --c-souper: #2A5FEB;     --t-souper: #D3DFFE;
  --c-grignotage: #00C48C; --t-grignotage: #C3F3E4;
}
[data-palette="pop"][data-mode="sombre"] {
  --fond: #0A1024; --fond-haut: #0A1024; --panneau-bas: #0A1024; --carte: #151E40; --quai: #1B2652;
  --encre: #F3F6FF; --doux: #AEB9E0; --trait: #283563; --piste: #283563; --lisere: rgba(255, 255, 255, .08);
  --lien: #8FB0FF; --alerte: #FF9C8D; --sur-encre: #0A1024; --voile: rgba(2, 4, 12, .68);
  --accent: #6C97FF; --sur-accent: #06102B;
  --bouton: #2F62EE; --sur-bouton: #FFFFFF;
  --bloc: linear-gradient(150deg, #2450D6 0%, #2377DB 62%, #1F9AD8 100%); --sur-bloc: #FFFFFF; --sur-bloc-doux: rgba(255, 255, 255, .88);
  --profil-a: #FFD23F; --profil-b: #FF9F1C; --profil-encre: #3A2400;
  --ombre: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 24px -14px rgba(0, 0, 0, .70);
  --ombre-plat: 0 2px 4px rgba(0, 0, 0, .30), 0 22px 44px -20px rgba(0, 0, 0, .85);
  --ombre-quai: 0 2px 6px rgba(0, 0, 0, .40), 0 20px 44px -12px rgba(0, 0, 0, .85);
  --c-dejeuner: #FFD23F;   --t-dejeuner: #4D3C0A;
  --c-dix_heures: #FFA23D; --t-dix_heures: #4F2C0C;
  --c-diner: #FF738C;      --t-diner: #561D2B;
  --c-gouter: #3FC8FF;     --t-gouter: #0B4160;
  --c-souper: #7C9DFF;     --t-souper: #1E2F7A;
  --c-grignotage: #33DDA9; --t-grignotage: #0A4A3A;
}
[data-case="dejeuner"]   { --c: var(--c-dejeuner);   --t: var(--t-dejeuner); }
[data-case="dix_heures"] { --c: var(--c-dix_heures); --t: var(--t-dix_heures); }
[data-case="diner"]      { --c: var(--c-diner);      --t: var(--t-diner); }
[data-case="gouter"]     { --c: var(--c-gouter);     --t: var(--t-gouter); }
[data-case="souper"]     { --c: var(--c-souper);     --t: var(--t-souper); }
[data-case="grignotage"] { --c: var(--c-grignotage); --t: var(--t-grignotage); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: linear-gradient(180deg, var(--fond-haut), var(--fond)) top / 100% 400px no-repeat, var(--fond);
  color: var(--encre);
  font: 600 17px/1.4 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); font-weight: 800; margin-top: 26px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--lien); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.doux { color: var(--doux); font-size: .93rem; }
.marque { font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.marque span { color: var(--c-souper); }
/* Le choix du thème, dans le profil : chaque pastille montre son thème dans ses propres couleurs
   (elle porte data-palette et data-mode, les blocs de couleurs valent sur elle). */
.themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.theme { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .9rem; font-weight: 800; color: var(--encre); }
.theme .apercu-theme {
  width: 100%; aspect-ratio: 1; border-radius: 18px; padding: 9px; display: grid; align-content: space-between;
  background: linear-gradient(160deg, var(--fond-haut), var(--fond)); box-shadow: inset 0 0 0 1.5px var(--trait);
}
.theme .apercu-theme i { display: block; height: 9px; border-radius: 5px; background: var(--carte); box-shadow: var(--ombre); }
.theme .apercu-theme b { display: flex; gap: 4px; }
.theme .apercu-theme b span { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.theme .apercu-theme em { display: block; height: 12px; border-radius: 6px; background: var(--accent); }
.theme[aria-pressed="true"] .apercu-theme { box-shadow: inset 0 0 0 1.5px var(--trait), 0 0 0 3px var(--fond), 0 0 0 5.5px var(--encre); }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--piste); }
.modes button { min-height: 44px; border-radius: 12px; font-weight: 800; color: var(--doux); }
.modes button[aria-pressed="true"] { background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
/* L'icône de l'environnement devant le nom (production ou test). */
.entete-marque { display: flex; align-items: center; gap: 14px; }
.entete-marque .marque { margin: 0; }
.logo { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 4px 10px rgba(20, 40, 80, .22)); }

/* ───────────────────────── Avant la connexion : une colonne étroite, centrée. */
.centre {
  max-width: 23rem; margin: 0 auto; padding: 16vh 22px 40px;
  display: flex; flex-direction: column; gap: 22px;
}
/* ───────────────────────── Les écrans secondaires : profil, comptes. */
.page {
  max-width: 34rem; margin: 0 auto;
  padding: env(safe-area-inset-top) max(18px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 16px;
}
.pile { display: flex; flex-direction: column; gap: 12px; }
.rang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

label { font-size: .86rem; font-weight: 700; color: var(--doux); margin-bottom: -6px; }
input, select, textarea {
  width: 100%; min-height: 50px; padding: 11px 14px; font: inherit; font-weight: 700; color: var(--encre);
  background: var(--carte); border: 1.5px solid var(--trait); border-radius: 14px;
}
textarea { display: block; min-height: 124px; resize: none; line-height: 1.35; }
input::placeholder, textarea::placeholder { color: var(--doux); font-weight: 600; }
.valeur { padding: 2px 0 4px; }

.bouton {
  display: block; width: 100%; min-height: 52px; padding: 13px 16px; font: inherit; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--sur-accent); background: var(--accent); border: 1.5px solid var(--accent); border-radius: 16px;
}
.bouton.second { color: var(--encre); background: transparent; border-color: var(--trait); font-weight: 700; }
.bouton.lien { width: auto; min-height: 44px; padding: 6px 2px; color: var(--lien); background: none; border: 0; font-weight: 700; }
.bouton.danger { color: #FFFFFF; background: #A8322A; border-color: #A8322A; }
.bouton.lien.danger { color: var(--alerte); background: none; align-self: flex-start; }
.bouton:disabled { opacity: .55; cursor: default; }

.message { color: var(--doux); font-size: .95rem; }
.message:empty, .page > div:empty { display: none; }
.message.erreur { color: var(--alerte); }
.avis { padding: 12px 14px; background: var(--t-gouter); border-radius: 14px; font-size: .95rem; }

/* Listes : appareils, comptes. */
.liste { border-top: 1.5px solid var(--trait); }
.liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1.5px solid var(--trait); }
.liste li > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.liste li span { overflow-wrap: anywhere; }
.gestes { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.reglage { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reglage > div { display: flex; flex-direction: column; }
.reglage .bouton { width: auto; flex: none; }
.reglage > div { min-width: 0; }
.reglage select { width: auto; max-width: 62%; }

.carte { background: var(--carte); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 1px var(--lisere), var(--ombre); }
.adresse { font: .85rem/1.4 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; color: var(--doux); }
.actions { display: flex; gap: 10px; }
.version { margin-top: 18px; }

.boite {
  width: min(24rem, calc(100vw - 40px)); padding: 22px; color: var(--encre); background: var(--quai);
  border: 0; border-radius: 24px; box-shadow: var(--ombre-quai);
}
.boite::backdrop, .feuille::backdrop { background: var(--voile); }
.boite .actions { margin-top: 18px; }

/* Les bandeaux : hors ligne, nouvelle version, installer. */
#bandeaux { position: relative; z-index: 10; }
.bandeau {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  padding: calc(7px + env(safe-area-inset-top)) 16px 7px; font-size: .93rem;
  background: var(--t-gouter); border-bottom: 1.5px solid var(--trait);
}
.bandeau + .bandeau { padding-top: 7px; }

/* ───────────────────────── La journée (téléphone) */
.app {
  --quai-h: 126px;
  min-height: 100dvh;
  padding:
    env(safe-area-inset-top)
    max(16px, env(safe-area-inset-right))
    calc(var(--quai-h) + 34px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding-top: 6px; }
.jour { display: flex; align-items: center; gap: 2px; margin-left: -10px; min-width: 0; }
.date { font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rond { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--encre); }
.rond .ico { stroke-width: 2.3; }
.rond:disabled { opacity: .28; cursor: default; }
.profil {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--profil-a), var(--profil-b));
  color: var(--profil-encre); font-weight: 800; font-size: 19px; line-height: 1; text-decoration: none;
  box-shadow: var(--ombre);
}
.pilule {
  display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 0 auto; padding: 0 18px;
  border-radius: 22px; background: var(--carte); color: var(--encre); font-size: 15px; font-weight: 800; text-decoration: none;
  box-shadow: 0 0 0 1px var(--lisere), var(--ombre);
}
.pilule.retour { margin-bottom: 6px; }

/* Le panneau du haut : deux vues que l'on fait glisser, les calories (l'anneau) et les
   macronutriments (trois jauges). Une flèche de chaque côté du titre. */
/* Une seule colonne, bornée à la largeur de la page : les deux vues côte à côte ne l'élargissent pas. */
.cadran { --d: clamp(196px, 56vw, 236px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 0 0 20px; }
.bascule { display: flex; align-items: center; justify-content: center; gap: 2px; }
.bascule .rond { color: var(--doux); }
.titre-vue { min-width: 11rem; text-align: center; font-size: 15.5px; font-weight: 800; }
/* Rogné sur les côtés seulement : en hauteur, l'ombre de l'anneau et celle des jauges doivent passer. */
.vues { width: 100%; max-width: 460px; overflow-x: clip; touch-action: pan-y; }
.piste-vues { display: flex; transition: transform .28s ease; }
.cadran[data-vue="macros"] .piste-vues { transform: translateX(-100%); }
.vue { flex: 0 0 100%; min-width: 0; display: grid; align-content: center; justify-items: center; }
/* La vue cachée disparaît une fois le glissement fini : son ombre ne déborde pas sur celle qu'on regarde. */
.vue[inert] { visibility: hidden; transition: visibility 0s .28s; }
/* L'anneau. */
.cadre { position: relative; width: 100%; max-width: 460px; display: grid; justify-items: center; }
/* Les jauges : une par macronutriment, découpée par repas aux couleurs des cases, comme l'anneau.
   La couleur dit de quel repas on parle, jamais si c'est trop ou trop peu. */
.macros { width: calc(100% - 8px); display: grid; gap: 15px; padding: 18px 18px 12px; border-radius: 24px; background: var(--carte); box-shadow: 0 0 0 1px var(--lisere), var(--ombre-plat); margin: 4px 0 8px; }
.jauge { display: grid; gap: 6px; }
.jauge-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jauge-tete .n { font-size: 16.5px; font-weight: 800; }
.jauge-tete .k { font-size: 14px; font-weight: 700; color: var(--doux); white-space: nowrap; }
.jauge-tete .k b { font-size: 19px; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.barre { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--piste); }
.part { min-width: 0; background: var(--c); }
.part + .part { box-shadow: inset 2px 0 0 var(--carte); }
.pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.pied .prov { margin: 0; }
.anneau {
  position: relative; width: var(--d); aspect-ratio: 1; border-radius: 50%;
  background: var(--carte); box-shadow: 0 0 0 1px var(--lisere), var(--ombre-plat);
}
.anneau svg { display: block; width: 100%; height: 100%; }
.piste { stroke: var(--piste); }
.seg { stroke: var(--c); }
.coeur { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.reste { font-size: calc(var(--d) * .29); font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.reste.long { font-size: calc(var(--d) * .215); }
.unite { margin-top: calc(var(--d) * .02); font-size: max(13px, calc(var(--d) * .066)); font-weight: 700; color: var(--doux); }
.repere { position: absolute; bottom: 0; display: flex; flex-direction: column; }
.repere.mange { left: 2px; }
.repere.objectif { right: 2px; text-align: right; }
.repere dt { font-size: 13.5px; font-weight: 700; color: var(--doux); }
.repere dd { font-size: 21px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }

/* Les cases. */
.cases, .colonne { display: grid; gap: 10px; align-content: start; min-width: 0; }
.colonne:empty { display: none; }
.case { background: var(--carte); border-radius: 22px; box-shadow: 0 0 0 1px var(--lisere), var(--ombre); min-width: 0; transition: box-shadow .2s; }
.case.vers { box-shadow: 0 0 0 2.5px var(--c), var(--ombre); }
.tete { width: 100%; min-height: 66px; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 12px; text-align: left; border-radius: 22px; }
.pastille { width: 36px; height: 36px; border-radius: 50%; background: var(--t); display: grid; place-items: center; flex: none; }
.pastille::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.nom { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; }
.total { font-size: 14px; font-weight: 700; color: var(--doux); white-space: nowrap; }
.total b { font-size: 19px; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.total.vide { font-size: 15px; font-weight: 600; }
.chevron { width: 22px; height: 22px; color: var(--doux); transition: transform .26s ease; }
.case.ouverte .chevron { transform: rotate(180deg); }

.corps { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .26s ease, visibility 0s .26s; }
.case.ouverte .corps { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .26s ease, visibility 0s; }
.dedans { overflow: hidden; min-height: 0; }
.contenu { padding: 0 12px 14px; }
/* Un aliment = une carte à part, à la teinte de sa case : nom et calories en tête, puis ses valeurs rangées en champs égaux. */
.lignes { display: grid; gap: 8px; }
.ligne { padding: 12px 12px 9px; border-radius: 16px; background: color-mix(in srgb, var(--t) 36%, var(--carte)); }
.l1 { display: flex; align-items: baseline; gap: 12px; padding: 0 2px; }
.l1 .n { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 800; overflow-wrap: anywhere; }
.l1 .k { font-size: 13px; font-weight: 700; color: var(--doux); white-space: nowrap; }
.l1 .k b { font-size: 18px; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.champs { display: flex; gap: 8px; margin-top: 10px; }
.champ { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Une valeur qui se touche : un champ, comme dans un formulaire. */
.val {
  width: 100%; height: 44px; padding: 0 6px; border-radius: 12px; background: var(--carte);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.val small { font-size: 12.5px; font-weight: 700; color: var(--doux); padding-top: 3px; }
.legende { font-size: 11.5px; font-weight: 700; color: var(--doux); text-align: center; white-space: nowrap; }
.plus {
  width: 100%; min-height: 48px; margin-top: 10px; border-radius: 16px; border: 2px dashed var(--c);
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15.5px; font-weight: 800;
}
.lignes:empty + .plus { margin-top: 0; }
.plus .ico { width: 20px; height: 20px; stroke-width: 2.3; }

/* Le quai : les quatre entrées, de même rang, à place fixe. */
.quai {
  position: fixed; z-index: 5;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 12px; border-radius: 28px;
  background: var(--quai); box-shadow: 0 0 0 1px var(--lisere), var(--ombre-quai);
}
.destination { display: flex; align-items: center; gap: 8px; min-height: 22px; margin: 0 4px 10px; font-size: 15.5px; font-weight: 800; }
.destination i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; transition: background-color .2s; }
.ajouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ajout {
  min-height: 64px; border-radius: 20px; background: var(--bouton); color: var(--sur-bouton);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 13px; font-weight: 800; transition: background-color .2s;
}
.ajout .ico { width: 26px; height: 26px; }
/* Une entrée pas encore construite : à sa place, éteinte. */
.ajout:disabled { background: transparent; box-shadow: inset 0 0 0 1.5px var(--trait); color: var(--doux); opacity: .6; cursor: default; }

/* ───────────────────────── Les feuilles : saisie, habituels. */
.feuille {
  width: 100%; max-width: 560px; max-height: 92dvh; margin: auto auto 0; padding: 0; overflow: auto;
  color: var(--encre); background: var(--quai); border: 0; border-radius: 28px 28px 0 0; box-shadow: var(--ombre-quai);
}
.feuille:focus { outline: none; }   /* la feuille prend la main à l'ouverture, sans cadre */
.interieur { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
.feuille h2 { overflow-wrap: anywhere; }
.feuille h3 { margin-top: 6px; }
/* Un demi, un quart : trois touches sous la quantité. */
.fractions { display: flex; gap: 8px; margin-top: -4px; }
.fraction {
  min-width: 56px; min-height: 44px; padding: 0 14px; border-radius: 14px; font-size: 1.2rem; font-weight: 800;
  background: color-mix(in srgb, var(--t-gouter) 45%, var(--carte)); box-shadow: inset 0 0 0 1.5px var(--trait);
}
/* Les habituels : deux onglets, une recherche, un rayon. */
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--trait) 55%, transparent); }
.onglet { min-height: 44px; border-radius: 12px; font-weight: 800; color: var(--doux); }
.onglet[aria-selected="true"] { background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
.recherche { display: flex; align-items: center; gap: 6px; }
.recherche input { flex: 1; min-width: 0; }
.dictee { background: var(--carte); box-shadow: inset 0 0 0 1.5px var(--trait); width: 50px; height: 50px; }
.dictee[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); }
.etoile { color: var(--doux); }
.etoile[aria-pressed="true"] { color: var(--c-dejeuner); }
.etoile[aria-pressed="true"] .ico { fill: currentColor; }
.suggestions { display: grid; gap: 6px; }
.suggestion, .habituel {
  width: 100%; min-height: 56px; padding: 9px 14px; border-radius: 14px; text-align: left;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  background: color-mix(in srgb, var(--t-gouter) 45%, var(--carte));
}
.suggestion b, .habituel b { overflow-wrap: anywhere; }
.habituels { display: grid; gap: 8px; }
.habituels li { display: flex; align-items: center; gap: 2px; }
.habituels li.doux { padding: 8px 2px; }
.habituel { flex: 1; min-width: 0; }
.habituels li.fait .habituel { box-shadow: inset 0 0 0 2px var(--c-grignotage); }
.marque-ajout { display: flex; align-items: center; gap: 4px; font-size: .86rem; font-weight: 800; }
.marque-ajout .ico { width: 18px; height: 18px; stroke-width: 2.6; }

/* La dictée : le texte, son micro, puis le tableau de vérification, une carte par aliment comme dans un repas ouvert. */
/* Le micro de la dictée : un vrai bouton, qui dit ce qu'il fait. Plein tant qu'il écoute. */
.micro { display: flex; align-items: center; justify-content: center; gap: 10px; }
.feuille p:empty { display: none; }
.micro[aria-pressed="true"] { color: var(--sur-encre); background: var(--encre); border-color: var(--encre); }
.l1:has(.retirer) { align-items: center; }
.retirer { margin: -10px -10px -10px -8px; color: var(--doux); }
.retirer .ico { width: 20px; height: 20px; }
/* D'où vient le chiffre : une étiquette, pleine pour « tes valeurs », en pointillé pour une estimation. Jamais une couleur de jugement. */
.prov {
  display: inline-block; margin: 5px 2px 0; padding: 2px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 800; color: var(--doux); border: 1.5px dashed color-mix(in srgb, var(--doux) 55%, transparent);
}
.prov[data-prov="tes_valeurs"] { color: var(--encre); background: var(--carte); border: 1.5px solid transparent; }
/* Une estimation se touche, pour lire pourquoi ce chiffre : l'étiquette porte un petit « i ». */
button.prov { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 8px 2px 10px; }
button.prov .ico { width: 16px; height: 16px; stroke-width: 2.1; }
.boite.info { display: flex; flex-direction: column; gap: 10px; }
.boite.info:not([open]) { display: none; }
.boite.info h3 { margin-top: 0; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--encre); }
.boite.info p { font-size: .97rem; }
.boite.info .actions { margin-top: 8px; }
.total-verif { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 0; font-size: 15px; font-weight: 800; }
.total-verif span:last-child { font-size: 14px; font-weight: 700; color: var(--doux); }
.total-verif b { font-size: 22px; font-weight: 900; color: var(--encre); font-variant-numeric: tabular-nums; }
/* Un aliment que la mémoire ne connaît pas encore : une étiquette à la teinte de la case. */
.neuf {
  display: inline-block; margin: 5px 2px 0; padding: 2px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--c) 34%, var(--carte)); border: 1.5px solid transparent;
}

/* La photo : deux gestes pour la choisir, son aperçu au-dessus du tableau, puis dans le repas un
   cadre par plat photographié : la photo en tête, ses lignes dessous. */
.choix { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* L'aperçu montre la photo entière, sans la rogner, et laisse la place au tableau. */
.apercu { display: block; max-width: 100%; max-height: 26dvh; margin: 0 auto; border-radius: 16px; }
.plat { display: grid; gap: 8px; padding: 8px; border-radius: 22px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.plat-tete { display: flex; align-items: center; gap: 12px; }
.vignette { display: block; width: 64px; height: 64px; border-radius: 15px; overflow: hidden; flex: none; background: var(--t); }
.vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.resume { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; color: var(--doux); }
.resume .k { font-size: 13px; }
.resume .k b { font-size: 19px; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.plat-tete .retirer { margin: 0 -2px 0 0; }
.grande { display: block; width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 14px; }

@media (max-width: 379px) {
  .ajout { font-size: 12.5px; }
  .tete { min-height: 62px; }
  .date { font-size: 18.5px; }
}

/* ───────────────────────── Tablette : la même page, plus ample */
@media (min-width: 700px) {
  body { font-size: 18px; background-size: 100% 520px, auto; }
  .centre { padding-top: 20vh; }
  .page { padding-top: 14px; }
  .app { --quai-h: 142px; max-width: 668px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .entete { min-height: 84px; padding-top: 14px; }
  .date { font-size: 25px; }
  .rond .ico { width: 26px; height: 26px; }
  .profil { width: 48px; height: 48px; font-size: 21px; }
  .cadran { --d: 304px; padding: 10px 0 32px; }
  .repere dt { font-size: 15px; }
  .repere dd { font-size: 26px; }
  .cases, .colonne { gap: 14px; }
  .case { border-radius: 26px; }
  .tete { min-height: 78px; padding: 0 18px 0 20px; gap: 16px; border-radius: 26px; }
  .pastille { width: 42px; height: 42px; }
  .pastille::after { width: 16px; height: 16px; }
  .nom { font-size: 21px; }
  .total { font-size: 15px; }
  .total b { font-size: 22px; }
  .total.vide { font-size: 16.5px; }
  .contenu { padding: 0 22px 22px; }
  .ligne { padding: 14px 14px 10px; }
  .l1 .n { font-size: 18px; }
  .l1 .k b { font-size: 18.5px; }
  .legende { font-size: 12.5px; }
  .quai { left: 50%; right: auto; width: min(620px, calc(100% - 48px)); transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); padding: 14px; border-radius: 32px; }
  .destination { font-size: 17px; margin: 0 6px 12px; }
  .ajouts { gap: 10px; }
  .ajout { min-height: 74px; border-radius: 22px; font-size: 14.5px; gap: 4px; }
  .ajout .ico { width: 28px; height: 28px; }
  .feuille { margin: auto; border-radius: 28px; }
  .interieur { padding: 28px; }
}

/* ───────────────────────── PC : l'anneau et les entrées à gauche, en place ; les cases à droite */
@media (min-width: 1100px) {
  body { background: var(--fond); }
  .app { --panneau: clamp(430px, 34vw, 540px); max-width: none; margin: 0; padding: 0 0 0 var(--panneau); }
  .app > .entete { padding: 30px 48px 12px; min-height: 0; max-width: 1180px; }
  .app > .entete .date { font-size: 27px; }
  .app > .message { padding: 0 48px; }
  .pilule.retour { margin: 0 0 4px 48px; }
  .tableau {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--panneau);
    display: flex; flex-direction: column; gap: 24px;
    padding: 32px 32px 32px max(32px, env(safe-area-inset-left));
    background: linear-gradient(165deg, var(--fond-haut), var(--panneau-bas));
    border-radius: 0 48px 48px 0;
  }
  .cadran { --d: min(340px, 44vh); flex: 1; min-height: 0; align-content: center; padding: 0; }
  .cadre, .vues { max-width: min(100%, calc(var(--d) + 120px)); }
  .quai { position: static; width: auto; transform: none; padding: 16px; box-shadow: 0 0 0 1px var(--lisere), var(--ombre-plat); }
  .ajout { min-height: 82px; }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 14px 48px 48px; max-width: 1180px; }
  .colonne { gap: 18px; }
  .tete { min-height: 92px; padding: 0 22px 0 24px; }
  .pastille { width: 46px; height: 46px; }
  .pastille::after { width: 18px; height: 18px; }
  .nom { font-size: 22px; }
  .contenu { padding: 0 24px 24px; }
  @media (hover: hover) {
    .tete:hover .chevron { color: var(--encre); }
    .val:hover, .plus:hover, .ajout:enabled:hover, .habituel:hover, .suggestion:hover { filter: brightness(.97) saturate(1.1); }
  }
}

/* ───────────────────────── Pop : le compteur dans un grand bloc bleu vif, son texte en blanc.
   Sur PC, c'est toute la colonne de gauche. (html : la page seule, jamais les pastilles du profil.) */
html[data-palette="pop"] .cadran { background: var(--bloc); border-radius: 32px; padding: 8px 14px 22px; margin: 6px 0 20px; box-shadow: var(--ombre-plat); }
html[data-palette="pop"] .cadran :is(.titre-vue, .bascule .rond, .repere dd) { color: var(--sur-bloc); }
html[data-palette="pop"] .cadran .repere dt { color: var(--sur-bloc-doux); }
html[data-palette="pop"] .cadran :is(.anneau, .macros) { box-shadow: 0 14px 30px -14px rgba(0, 10, 60, .55); }
@media (min-width: 1100px) {
  html[data-palette="pop"] .tableau { background: var(--bloc); }
  html[data-palette="pop"] .cadran { background: none; box-shadow: none; padding: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}