@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(/fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(/fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700.woff2) format('woff2'); }

:root {
  --frigo: #e9f0ee;
  --tablette: #ffffff;
  --sapin: #0f3b35;
  --gris: #51635f;
  --filet: #bccbc7;
  --jaune: #ffd21f;
  --rouge: #c8102e;
  --burst: polygon(50% 0, 61% 9%, 75% 7%, 80% 20%, 93% 25%, 91% 39%, 100% 50%, 91% 61%, 93% 75%, 80% 80%, 75% 93%, 61% 91%, 50% 100%, 39% 91%, 25% 93%, 20% 80%, 7% 75%, 9% 61%, 0 50%, 9% 39%, 7% 25%, 20% 20%, 25% 7%, 39% 9%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--frigo);
  color: var(--sapin);
  font: 400 1.0625rem/1.45 Barlow, system-ui, sans-serif;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}
main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
[hidden] { display: none !important; }

h1, h2 { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; line-height: 1.05; }
h1 { font-size: 2.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.625rem; margin: 2.25rem 0 .5rem; }
h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; }
p { margin: 0 0 .75rem; }

:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--sapin); color: #fff;
  padding: calc(.5rem + env(safe-area-inset-top)) 1rem .5rem;
  position: sticky; top: 0; z-index: 2;
}
.top p { margin: 0; font-size: .9375rem; line-height: 1.25; }
.top .button-quiet { color: #fff; border-color: #ffffff80; flex: none; }
.top.alert { background: var(--rouge); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1rem;
  font: 600 1rem Barlow, system-ui, sans-serif;
  border: 2px solid var(--sapin); border-radius: .375rem;
  background: none; color: var(--sapin); cursor: pointer; text-decoration: none;
}
.button-primary { background: var(--sapin); color: #fff; }
.button:disabled { opacity: .55; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.tabs {
  position: fixed; inset: auto 0 0; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--tablette); border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  min-height: 3.5rem; border: 0; background: none; cursor: pointer;
  color: var(--gris); font: 600 1rem Barlow, system-ui, sans-serif;
  border-top: 4px solid transparent;
}
.tabs button[aria-current] { color: var(--sapin); border-top-color: var(--rouge); }

/* La rangée d'offres : la pastille de prix porte l'interface. */
.group { margin-bottom: 1.75rem; }
.group h2 { margin: 0 0 .5rem; }
.offer {
  display: grid; grid-template-columns: 5.75rem 1fr; gap: .75rem; align-items: center;
  background: var(--tablette); padding: .625rem .75rem .625rem .5rem;
  border-bottom: 1px solid var(--filet);
}
.offer:first-of-type { border-radius: .375rem .375rem 0 0; }
.offer:last-of-type { border-radius: 0 0 .375rem .375rem; border-bottom: 0; }
.sticker {
  display: grid; place-items: center;
  width: 5.75rem; aspect-ratio: 1; margin: 0;
  background: var(--jaune); color: var(--rouge);
  clip-path: var(--burst);
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700;
  text-align: center; line-height: .95;
}
.sticker .amount { font-size: 1.625rem; display: block; }
.sticker .off { font-size: 1rem; color: var(--sapin); display: block; }
.offer h3 { overflow-wrap: anywhere; }
.offer div p { margin: .125rem 0 0; font-size: .9375rem; color: var(--gris); }
.offer .left { color: var(--sapin); font-weight: 600; }
.offer .left.low { color: var(--rouge); }

.empty { background: var(--tablette); padding: 1.25rem; border-radius: .375rem; }
.empty p:last-child { margin-bottom: 0; }

.row {
  background: var(--tablette); padding: .75rem; margin-bottom: .5rem; border-radius: .375rem;
}
.row-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.row .criteria { color: var(--gris); font-size: .9375rem; margin: .25rem 0 .5rem; overflow-wrap: anywhere; }
.row .row-actions { display: flex; gap: .5rem; }
.row .button { min-height: 2.5rem; padding: 0 .75rem; font-size: .9375rem; }

.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; flex: none; font-size: .9375rem; min-height: 2.75rem; }
.switch input {
  appearance: none; margin: 0; cursor: pointer;
  width: 2.75rem; height: 1.625rem; border-radius: 1rem;
  background: var(--filet); position: relative;
}
.switch input::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff;
  transition: transform .12s;
}
.switch input:checked { background: var(--sapin); }
.switch input:checked::after { transform: translateX(1.125rem); }

label { display: block; font-weight: 600; margin: .875rem 0 .25rem; }
input:not([type=checkbox]), select {
  width: 100%; min-height: 2.75rem; padding: .375rem .625rem;
  font: 400 1.0625rem Barlow, system-ui, sans-serif;
  color: var(--sapin); background: #fff;
  border: 2px solid var(--filet); border-radius: .375rem;
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.hint { color: var(--gris); font-size: .9375rem; margin: .5rem 0 0; }
.form-error, .login-error { color: var(--rouge); font-weight: 600; margin: .75rem 0 0; }

dialog {
  border: 0; border-radius: .5rem; padding: 1rem; color: var(--sapin);
  width: min(100vw - 1.5rem, 32rem); max-height: calc(100dvh - 1.5rem);
}
dialog::backdrop { background: #0f3b35b3; }
dialog h2 { margin-top: 0; }
#s-locate { margin-top: .75rem; }

.login { display: grid; place-items: center; min-height: 100dvh; padding: 1rem; background: #fff; }
.login main { width: min(100%, 20rem); padding: 0; display: grid; gap: 1.5rem; }
.login h1 { font: 600 1.75rem/1.2 Barlow, system-ui, sans-serif; margin: 0; text-align: center; }
.google {
  display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3rem;
  border: 1px solid var(--filet); border-radius: .375rem;
  color: var(--sapin); font-weight: 600; text-decoration: none;
}
.google:hover { background: var(--frigo); }
.google svg { width: 1.25rem; height: 1.25rem; }
.login .login-error { margin: 0; font-size: .9375rem; font-weight: 400; text-align: center; }

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

table { border-collapse: collapse; width: 100%; background: var(--tablette); }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--filet); }
th { font-weight: 600; }
td:last-child, th:last-child { text-align: right; }