/* LE SÉLECTEUR DE LANGUE ET D'UNITÉS (handoff Refontes/design_handoff_langue, 09/10/2026).
   Repris de la feuille de langue.html, classes préfixées `lu-` (la maquette avait .lang, .pop,
   .lg, .un, .q...), couleurs de l'appli (--ink, --line, --primary...) avec celles de la
   maquette en repli. Le comportement est dans public/app/js/popotam-langue-ui.js. */
:root { --lu-ink: var(--ink, #2A211B); --lu-dark: #33261B; --lu-muted: var(--muted, #9C8B79); --lu-ink2: var(--ink-soft, #6A5C4C);
  --lu-line: var(--line, #E6D3AE); --lu-cream: var(--surface-2, #FCEFD9); --lu-orange: var(--primary, #F0682F); --lu-orange-d: var(--primary-ink, #DA541E);
  --lu-orange-bg: var(--primary-bg, #FCE3D8); --lu-sun-bg: var(--gold-bg, #FFF1D2); --lu-spring: cubic-bezier(.3,1.35,.45,1); }

/* ---------- l'interrupteur FR | EN ---------- */
.lu-lang { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; width: 96px; height: 44px; padding: 4px; margin: 0;
  border-radius: 999px; border: 1.5px solid var(--lu-line); background: var(--surface, #fff); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .25s, box-shadow .25s, transform .35s var(--lu-spring); }
.lu-lang[hidden] { display: none; }
.lu-lang:hover { border-color: var(--lu-ink); box-shadow: 0 3px 0 var(--lu-ink); transform: translateY(-1px); }
.lu-lang[aria-expanded="true"] { border-color: var(--lu-ink); box-shadow: 0 0 0 4px var(--lu-orange-bg); }
.lu-lang:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(210,85,47,.5)); }
.lu-lang .lu-lk { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--lu-dark);
  transition: transform .55s var(--lu-spring), width .3s; }
.lu-lang[data-l="en"] .lu-lk { transform: translateX(100%); }
.lu-lang:hover .lu-lk { width: calc(50% - 2px); }
.lu-lang .lu-lo { position: relative; z-index: 1; display: grid; place-items: center; font: 800 13.5px "Bricolage Grotesque", var(--font-body, system-ui), sans-serif;
  letter-spacing: .04em; color: var(--lu-muted); transition: color .3s .1s; }
.lu-lang[data-l="fr"] .lu-fr, .lu-lang[data-l="en"] .lu-en { color: #fff; }
/* Sur téléphone, il reste dans la barre (les autres boutons ronds partent dans les gouttes),
   un peu plus étroit sur les tout petits écrans pour que la barre ne déborde jamais. */
@media (max-width: 600px) { .topbar-right > .lu-lang:not([hidden]) { display: grid; } }
@media (max-width: 380px) { .lu-lang { width: 80px; height: 40px; } .lu-lang .lu-lo { font-size: 12.5px; } }

/* ---------- le panneau, accroché au bouton ---------- */
.lu-pop { position: fixed; z-index: 380; width: 344px; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: none; padding: 16px;
  border-radius: 24px; background: var(--surface, #fff); border: 2px solid var(--lu-ink); color: var(--lu-ink);
  box-shadow: 0 6px 0 var(--lu-ink), 0 30px 50px -24px rgba(60,30,10,.45); transform-origin: 85% 0; font-family: var(--font-body, "Hanken Grotesk", system-ui, sans-serif); }
.lu-pop[hidden] { display: none; }
/* Sur ordinateur le panneau est court : rien ne défile, et la flèche qui dépasse en haut reste visible. */
.lu-pop:not(.lu-sheet) { overflow: visible; max-height: none; }
.lu-pop::-webkit-scrollbar { display: none; }
.lu-pop button { font: inherit; color: inherit; cursor: pointer; }
.lu-pa { position: absolute; top: -9px; width: 16px; height: 16px; background: var(--surface, #fff); border-left: 2px solid var(--lu-ink); border-top: 2px solid var(--lu-ink);
  transform: rotate(45deg); border-radius: 3px 0 0 0; }
.lu-pop.lu-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 86vh; border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 50px -20px rgba(60,30,10,.45); border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.lu-pop.lu-sheet::before { content: ""; display: block; width: 44px; height: 5px; margin: -6px auto 10px; border-radius: 3px; background: var(--lu-line); }
.lu-pop.lu-sheet .lu-pa { display: none; }
.lu-ph { display: flex; align-items: center; gap: 10px; }
.lu-pf { width: 38px; height: 38px; border-radius: 12px; background: var(--lu-orange); overflow: hidden; transform: rotate(-5deg); flex: none; }
.lu-pf svg { width: 100%; height: 100%; display: block; }
.lu-hand { flex: 1; font: 700 22px/1 "Caveat", cursive; color: var(--lu-orange-d); transform: rotate(-2deg); }
.lu-px { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--lu-cream); display: grid; place-items: center; color: var(--lu-ink2);
  transition: transform .35s var(--lu-spring); flex: none; }
.lu-px:hover { transform: rotate(90deg); }
.lu-pl { margin: 14px 0 7px; font: 800 11px var(--font-body, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--lu-muted); }
/* langue et unités : deux choix, un curseur qui glisse */
.lu-lg, .lu-un { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 18px; background: var(--lu-cream); }
.lu-lg::before, .lu-un::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  transform: translateX(calc(100% * var(--i, 0))); transition: transform .55s var(--lu-spring); }
.lu-lg::before { border-radius: 14px; background: var(--surface, #fff); border: 2px solid var(--lu-ink); box-shadow: 0 3px 0 var(--lu-ink); }
.lu-un::before { border-radius: 12px; background: var(--lu-dark); }
.lu-lg button, .lu-un button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: none; text-align: left; }
.lu-lg button { min-height: 66px; padding: 10px 14px; }
.lu-lg b { font: 800 16px "Bricolage Grotesque", system-ui, sans-serif; color: var(--lu-ink2); transition: color .3s; }
.lu-say { font: 700 21px/1 "Caveat", cursive; color: var(--lu-muted); transition: color .3s, transform .5s var(--lu-spring); transform-origin: left; }
.lu-lg [aria-checked="true"] b { color: var(--lu-ink); }
.lu-lg [aria-checked="true"] .lu-say { color: var(--lu-orange-d); transform: rotate(-4deg) scale(1.06); }
.lu-un button { min-height: 52px; padding: 8px 14px; justify-content: center; }
.lu-un b { font: 800 14.5px "Bricolage Grotesque", system-ui, sans-serif; color: var(--lu-ink2); transition: color .3s .05s; }
.lu-un small { font: 600 12px var(--font-body, system-ui); color: var(--lu-muted); transition: color .3s .05s; }
.lu-un [aria-checked="true"] b { color: #fff; }
.lu-un [aria-checked="true"] small { color: #D9CBB8; }
.lu-lg button:focus-visible, .lu-un button:focus-visible, .lu-px:focus-visible, .lu-sug button:focus-visible { outline: 2px solid var(--lu-orange); outline-offset: 2px; border-radius: 12px; }
.lu-sug { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 9px 10px 9px 12px; border-radius: 14px; background: var(--lu-sun-bg);
  font: 700 13px var(--font-body, system-ui); color: #6B4A0E; }
.lu-sug[hidden] { display: none; }
.lu-sug span { flex: 1; min-width: 140px; }
.lu-sug button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; font: 800 12.5px "Bricolage Grotesque", system-ui, sans-serif; }
.lu-sug button[data-sug="1"] { background: var(--lu-dark); color: #fff; }
.lu-sug button[data-sug="0"] { background: none; color: #6B4A0E; text-decoration: underline; text-underline-offset: 3px; }
.lu-pv { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed var(--lu-line); display: grid; gap: 5px; }
.lu-pvl { font: 800 10.5px var(--font-body, system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--lu-muted); }
.lu-pv div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 13.5px var(--font-body, system-ui); }
.lu-pn { display: flex; gap: 7px; align-items: flex-start; margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--lu-muted); }
.lu-pn svg { flex: none; margin-top: 1px; }
/* les quantités qui roulent */
.lu-q { display: inline-grid; overflow: hidden; padding: 0 5px; margin-right: -5px; border-radius: 6px; font: 800 14px "Bricolage Grotesque", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; vertical-align: middle; }
.lu-q > span { grid-area: 1/1; white-space: nowrap; text-align: right; }

/* ---------- le cercle : View Transitions (le script anime clip-path sur la nouvelle vue) ---------- */
html.lu-vt::view-transition-old(root), html.lu-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.lu-vt::view-transition-new(root) { z-index: 2; }
.lu-ring { position: fixed; z-index: 2147483000; width: 0; height: 0; border-radius: 50%; border: 3px solid var(--lu-orange);
  box-shadow: inset 0 0 0 6px rgba(240,104,47,.18), inset 0 0 40px 6px rgba(255,197,61,.35); translate: -50% -50%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lu-lang, .lu-lang .lu-lk, .lu-lg::before, .lu-un::before, .lu-say, .lu-px { transition: none; }
}