/* Miamento — propositions de couleurs du 02/10/2026, à la demande d'Émilie : « plus joyeux, plus
   coloré, tout en restant dans les tons bleus ». Trois palettes, chacune en clair et en sombre,
   plus « Ciel », celle de l'application aujourd'hui, pour comparer.

   Une palette est un jeu de variables, les mêmes que celles de web/style.css : la retenue se
   portera dans l'application en les recopiant. Quatre variables sont nouvelles :
     --accent, --sur-accent    le bouton principal (aujourd'hui de la couleur de l'encre)
     --bouton, --sur-bouton    les quatre boutons du bas, d'une seule couleur (aujourd'hui ils
                               prennent la teinte du repas de destination)
   « Pop » ajoute --bloc : le compteur dans un grand bloc bleu vif. */

html[data-mode="clair"] { color-scheme: light; }
html[data-mode="sombre"] { color-scheme: dark; }

/* ───────────────────────── Ciel : l'application aujourd'hui (choisie le 01/10/2026) */
html[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;
  --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;
}
html[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;
  --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;
}

/* ───────────────────────── 1. Azur : un ciel d'été. Bleu franc et lumineux, blancs nets, cases en couleurs vives. */
html[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;
}
html[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;
}

/* ───────────────────────── 2. Lagon : turquoise et mer chaude. Plus vert que le ciel, cases aux couleurs de fruits. */
html[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;
}
html[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;
}

/* ───────────────────────── 3. Pop : la plus colorée. Fond blanc, le compteur dans un grand bloc bleu vif, boutons pleins. */
html[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;
}
html[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;
}

/* ───────────────────────── Ce que les trois propositions changent au-delà des variables. */
/* Les quatre boutons du bas d'une seule couleur : la destination reste dite par la pastille et le libellé. */
html:not([data-palette="ciel"]) .ajout:enabled { background: var(--bouton); color: var(--sur-bouton); }
/* Le bouton principal à la couleur d'accent, plutôt qu'à celle de l'encre. */
html:not([data-palette="ciel"]) .bouton:not(.second):not(.lien):not(.danger) { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

/* Pop : le compteur dans un bloc bleu vif, son texte en blanc. Sur PC, c'est toute la colonne de gauche. */
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; }
}