/* palettes.css - trois jeux de couleurs issus de la charte officielle Veolia (Brand Center, relevee le 30/09/2026).
 * Source : palette principale (#002D62 marine, #05C3DD turquoise, #78BE21 vert, #438D42 vert sapin,
 * #772583 violet, #FF6900 orange, #FF0000 rouge). Police web : Roboto (police de secours de TheSans sur eau.veolia.fr ; TheSans sous licence, a fournir par Veolia).
 * Regles suivies : 2 couleurs vives par jeu, nuances par melange avec le blanc ou le noir.
 * Contrastes calcules (WCAG) : blanc sur fond fonce >= 4,6:1, marine sur accent >= 4,7:1, texte gris #55555A >= 6,4:1.
 * Changer de jeu : attribut data-palette sur <html> (eau | dechets | energie), pilote par palettes.js.
 * C'est le SEUL fichier qui contient des valeurs hexadecimales : tout le reste passe par ces variables. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 900; font-stretch: 100%; font-display: swap;
  src: url("fonts/Roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- neutres communs aux trois jeux (rampe Veolia Design System v3.1) ---- */
:root {
  --lumx-typography-font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mv-motif-apps: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20620%20300%22%20preserveAspectRatio=%22xMaxYMin%20slice%22%3E%3Ccircle%20cx=%22560%22%20cy=%2240%22%20r=%22210%22%20fill=%22none%22%20stroke=%22%2305C3DD%22%20stroke-opacity=%22.22%22%20stroke-width=%2226%22/%3E%3Ccircle%20cx=%22560%22%20cy=%2240%22%20r=%22150%22%20fill=%22none%22%20stroke=%22%23FFFFFF%22%20stroke-opacity=%22.07%22%20stroke-width=%222%22/%3E%3Crect%20x=%22250%22%20y=%22-20%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.06%22/%3E%3Cpath%20transform=%22translate%28273%203%29%22%20d=%22M-7-7h14v14h-14z%22%20fill=%22none%22%20stroke=%22%23FFFFFF%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.14%22/%3E%3Crect%20x=%22310%22%20y=%22-20%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%2305C3DD%22%20fill-opacity=%220.18%22/%3E%3Crect%20x=%22370%22%20y=%22-20%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.17%22/%3E%3Crect%20x=%22430%22%20y=%22-20%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.23%22/%3E%3Cpath%20transform=%22translate%28453%203%29%22%20d=%22M-8%204l6-6%204%204%206-8%22%20fill=%22none%22%20stroke=%22%23FFFFFF%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.50%22/%3E%3Crect%20x=%22490%22%20y=%22-20%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.28%22/%3E%3Crect%20x=%22550%22%20y=%22-20%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.31%22/%3E%3Crect%20x=%22250%22%20y=%2240%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%2305C3DD%22%20fill-opacity=%220.10%22/%3E%3Crect%20x=%22310%22%20y=%2240%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.12%22/%3E%3Crect%20x=%22370%22%20y=%2240%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.17%22/%3E%3Cpath%20transform=%22translate%28393%2063%29%22%20d=%22M-8%200a8%208%200%201%200%2016%200a8%208%200%201%200-16%200%22%20fill=%22none%22%20stroke=%22%23FFFFFF%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.38%22/%3E%3Crect%20x=%22430%22%20y=%2240%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.23%22/%3E%3Crect%20x=%22490%22%20y=%2240%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.28%22/%3E%3Crect%20x=%22550%22%20y=%2240%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%2305C3DD%22%20fill-opacity=%220.47%22/%3E%3Cpath%20transform=%22translate%28573%2063%29%22%20d=%22M0-9l8%2016h-16z%22%20fill=%22none%22%20stroke=%22%23002D62%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.69%22/%3E%3Crect%20x=%22250%22%20y=%22100%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.05%22/%3E%3Crect%20x=%22310%22%20y=%22100%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.11%22/%3E%3Cpath%20transform=%22translate%28333%20123%29%22%20d=%22M-9%200h18M0-9v18%22%20fill=%22none%22%20stroke=%22%23FFFFFF%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.23%22/%3E%3Crect%20x=%22370%22%20y=%22100%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.16%22/%3E%3Crect%20x=%22430%22%20y=%22100%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.20%22/%3E%3Crect%20x=%22490%22%20y=%22100%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%2305C3DD%22%20fill-opacity=%220.36%22/%3E%3Cpath%20transform=%22translate%28513%20123%29%22%20d=%22M-9%200h18M0-9v18%22%20fill=%22none%22%20stroke=%22%23002D62%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.53%22/%3E%3Crect%20x=%22550%22%20y=%22100%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.26%22/%3E%3Crect%20x=%22250%22%20y=%22160%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.03%22/%3E%3Cpath%20transform=%22translate%28273%20183%29%22%20d=%22M-8-4h16M-8%204h10%22%20fill=%22none%22%20stroke=%22%23FFFFFF%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.07%22/%3E%3Crect%20x=%22310%22%20y=%22160%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.08%22/%3E%3Crect%20x=%22370%22%20y=%22160%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.13%22/%3E%3Crect%20x=%22430%22%20y=%22160%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%2305C3DD%22%20fill-opacity=%220.25%22/%3E%3Cpath%20transform=%22translate%28453%20183%29%22%20d=%22M-9%200h18M0-9v18%22%20fill=%22none%22%20stroke=%22%23002D62%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.36%22/%3E%3Crect%20x=%22490%22%20y=%22160%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.19%22/%3E%3Crect%20x=%22550%22%20y=%22160%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.20%22/%3E%3Crect%20x=%22310%22%20y=%22220%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.05%22/%3E%3Crect%20x=%22370%22%20y=%22220%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%2305C3DD%22%20fill-opacity=%220.13%22/%3E%3Cpath%20transform=%22translate%28393%20243%29%22%20d=%22M-7-7h14v14h-14z%22%20fill=%22none%22%20stroke=%22%23002D62%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.19%22/%3E%3Crect%20x=%22430%22%20y=%22220%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.12%22/%3E%3Crect%20x=%22490%22%20y=%22220%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.14%22/%3E%3Crect%20x=%22550%22%20y=%22220%22%20width=%2246%22%20height=%2246%22%20rx=%2212%22%20fill=%22%23FFFFFF%22%20fill-opacity=%220.15%22/%3E%3Cpath%20transform=%22translate%28573%20243%29%22%20d=%22M-8-4h16M-8%204h10%22%20fill=%22none%22%20stroke=%22%23FFFFFF%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20stroke-opacity=%220.32%22/%3E%3C/svg%3E");
  --mv-surface: #FFFFFF; --mv-encre: #1C1C1F; --mv-gris: #55555A; --mv-filet: #E9E6F4;
  --mv-alerte: #FF0000; --mv-alerte-fond: #FEF2F2; --mv-succes: #438D42;
  /* pastilles du selecteur : chaque jeu montre ses deux couleurs, quel que soit le jeu actif */
  --sw-eau-a: #002D62; --sw-eau-b: #05C3DD;
  --sw-dechets-a: #256250; --sw-dechets-b: #78BE21;
  --sw-energie-a: #4A1751; --sw-energie-b: #FF6900;
}
body, button, input { font-family: var(--lumx-typography-font-family); }

:root[data-palette="eau"] {
  --pal-deep: #002D62; --pal-deep2: #001C3D; --pal-mid: #025683; --pal-bright: #037EA4; --pal-light: #9FCEDC;
  --pal-accent: #05C3DD; --pal-ink: #002D62; --pal-link: #025683;
  --pal-page: #EDF0F4; --pal-page-a: #D7F5FA; --pal-page-b: #E6F2F6; --pal-clair-1: #E8FAFC; --pal-clair-2: #CDF3F8;
  --lumx-color-primary-N: #037EA4; --lumx-color-primary-D1: #025683; --lumx-color-primary-D2: #002D62;
  --lumx-color-secondary-N: #002D62; --lumx-color-secondary-D1: #001C3D; --lumx-color-secondary-D2: #001C3D;
  --lumx-color-accent-N: #05C3DD;
  --lumx-color-red-N: #FF0000;
  --xp-accent: #002D62; --xp-ink: #002D62;
}
:root[data-palette="dechets"] {
  --pal-deep: #256250; --pal-deep2: #173D32; --pal-mid: #30724A; --pal-bright: #3C8345; --pal-light: #B5D0B8;
  --pal-accent: #78BE21; --pal-ink: #002D62; --pal-link: #30724A;
  --pal-page: #F0F4F3; --pal-page-a: #E9F5DB; --pal-page-b: #ECF3EC; --pal-clair-1: #F3F9EB; --pal-clair-2: #E4F2D3;
  --lumx-color-primary-N: #3C8345; --lumx-color-primary-D1: #30724A; --lumx-color-primary-D2: #256250;
  --lumx-color-secondary-N: #256250; --lumx-color-secondary-D1: #173D32; --lumx-color-secondary-D2: #173D32;
  --lumx-color-accent-N: #78BE21;
  --lumx-color-red-N: #FF0000;
  --xp-accent: #256250; --xp-ink: #256250;
}
:root[data-palette="energie"] {
  --pal-deep: #4A1751; --pal-deep2: #290D2D; --pal-mid: #601E6A; --pal-bright: #772583; --pal-light: #CBACD0;
  --pal-accent: #FF6900; --pal-ink: #002D62; --pal-link: #601E6A;
  --pal-page: #F2EFF3; --pal-page-a: #FFE7D6; --pal-page-b: #F1E9F3; --pal-clair-1: #FFF2E8; --pal-clair-2: #FFE1CC;
  --lumx-color-primary-N: #772583; --lumx-color-primary-D1: #601E6A; --lumx-color-primary-D2: #4A1751;
  --lumx-color-secondary-N: #4A1751; --lumx-color-secondary-D1: #290D2D; --lumx-color-secondary-D2: #290D2D;
  --lumx-color-accent-N: #FF6900;
  --lumx-color-red-N: #FF0000;
  --xp-accent: #4A1751; --xp-ink: #4A1751;
}

/* ---- selecteur de jeu de couleurs, a cote du bouton Mode explicatif ---- */
.pal-dock { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 44px); }
.pal-dock .xp-fab { position: static; }
.pal-sw { display: inline-flex; align-items: center; gap: 4px; padding: 4px; min-height: 46px; background: var(--mv-surface); border: 1px solid var(--pal-deep); border-radius: 999px; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--pal-deep) 45%, transparent); }
.pal-sw--ferme { padding: 4px; }
.pal-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px 0 8px; border: 2px solid transparent; border-radius: 999px; background: transparent; color: var(--pal-deep); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; }
.pal-btn:hover { background: color-mix(in srgb, var(--pal-deep) 7%, transparent); }
.pal-btn:focus-visible { outline: 3px solid var(--pal-link); outline-offset: 2px; }
.pal-btn[aria-checked="true"] { border-color: var(--pal-deep); background: color-mix(in srgb, var(--pal-deep) 6%, transparent); }
.pal-btn__dots { display: inline-flex; }
.pal-btn__dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--mv-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pal-deep) 25%, transparent); }
.pal-btn__dots i + i { margin-left: -6px; }
.pal-btn[data-pal="eau"] .pal-btn__dots i:first-child { background: var(--sw-eau-a); }
.pal-btn[data-pal="eau"] .pal-btn__dots i:last-child { background: var(--sw-eau-b); }
.pal-btn[data-pal="dechets"] .pal-btn__dots i:first-child { background: var(--sw-dechets-a); }
.pal-btn[data-pal="dechets"] .pal-btn__dots i:last-child { background: var(--sw-dechets-b); }
.pal-btn[data-pal="energie"] .pal-btn__dots i:first-child { background: var(--sw-energie-a); }
.pal-btn[data-pal="energie"] .pal-btn__dots i:last-child { background: var(--sw-energie-b); }
@media (max-width: 720px) { .pal-btn { padding: 0 8px; } .pal-btn__lib { display: none; } .pal-btn[aria-checked="true"] .pal-btn__lib { display: inline; } }
@media (prefers-reduced-motion: no-preference) { .pal-btn { transition: background .15s ease; } }

/* ---- ouvrir / fermer l'acces aux jeux de couleurs ---- */
.pal-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--pal-deep); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pal-toggle:hover { background: color-mix(in srgb, var(--pal-deep) 7%, transparent); }
.pal-toggle:focus-visible { outline: 3px solid var(--pal-link); outline-offset: 2px; }
.pal-toggle .material-symbols-rounded { font-size: 20px; }
.pal-toggle__chev { transition: transform .2s ease; transform: rotate(180deg); }
.pal-toggle[aria-expanded="false"] .pal-toggle__chev { transform: rotate(0deg); }
.pal-opts { display: inline-flex; align-items: center; gap: 4px; }
.pal-opts[hidden] { display: none; }
@media (max-width: 720px) { .pal-toggle__lib { display: none; } }
@media (prefers-reduced-motion: reduce) { .pal-toggle__chev { transition: none; } }