/* DA — planilha-producao-padaria (but g229, t235)
   Saco de pão × quadro de produção × etiqueta de balança.
   Le site est le sac kraft du matin : bord dentelé, encre bleue à un seul ton
   imprimée sur le papier, et dedans le quadro de produção blanc où l'on lit les
   quantités en gros chiffres serrés, comme au feutre. Le prix est une étiquette
   de balance perforée. Un seul bleu d'imprimerie, un seul rouge réservé aux
   alertes de sobra. Rien de plus doux que ça.
   Liste des interdits : design/NOTES.md. */

/* ---------- 1. Primitifs ---------- */
:root {
  --kraft-200: oklch(88% 0.045 78);
  --kraft-300: oklch(81% 0.07 74);
  --kraft-400: oklch(74% 0.085 70);
  --kraft-600: oklch(56% 0.08 62);
  --flour-0:   oklch(99.3% 0.002 250);
  --flour-50:  oklch(97.6% 0.006 250);
  --flour-100: oklch(94.5% 0.012 252);
  --ink-100:   oklch(90% 0.035 255);
  --ink-300:   oklch(72% 0.08 257);
  --ink-600:   oklch(45% 0.13 260);
  --ink-700:   oklch(37% 0.12 261);
  --ink-800:   oklch(30% 0.09 262);
  --ink-900:   oklch(23% 0.05 260);
  --slate-600: oklch(44% 0.03 255);
  --red-600:   oklch(50% 0.17 29);
  --red-50:    oklch(96% 0.025 29);
  --green-700: oklch(43% 0.1 152);
  --green-50:  oklch(96% 0.03 152);

  /* ---------- 2. Sémantiques (les composants n'utilisent que celles-ci) ---------- */
  --c-bg: var(--flour-50);
  --c-surface: var(--flour-0);
  --c-sunk: var(--flour-100);
  --c-kraft: var(--kraft-400);
  --c-kraft-soft: var(--kraft-200);
  --c-kraft-edge: var(--kraft-600);
  --c-fg: var(--ink-900);
  --c-fg-muted: var(--slate-600);
  --c-ink: var(--ink-700);
  --c-ink-strong: var(--ink-800);
  --c-on-ink: var(--flour-0);
  --c-grid: var(--ink-100);
  --c-line: oklch(84% 0.02 255);
  --c-focus: var(--ink-600);
  --c-alert: var(--red-600);
  --c-alert-bg: var(--red-50);
  --c-ok: var(--green-700);
  --c-ok-bg: var(--green-50);

  /* Typo : une grotesque condensée système (balança / placa de padaria) + texte système */
  --f-board: "DIN Alternate", "Bahnschrift SemiCondensed", "Bahnschrift", "Roboto Condensed",
             "sans-serif-condensed", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --f-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --t-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --t-3:  clamp(1.85rem, 1.5rem + 1.6vw, 2.9rem);
  --t-hero: clamp(2.35rem, 1.6rem + 3.6vw, 4.6rem);
  --t-num: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;

  --r-field: 3px;      /* champs et boutons : presque droits, comme un formulaire imprimé */
  --r-board: 6px;      /* le quadro, objet physique, seul élément un peu arrondi */
  --w-page: 72rem;
  --w-text: 40rem;
  --edge: 12px;        /* hauteur des dents du sac kraft */
  --press: 0 2px 0 var(--ink-900);           /* bouton imprimé en relief, pas d'ombre floue */
  --lift: 0 1px 0 var(--c-line), 0 10px 0 -6px var(--c-sunk);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-fg);
  font: 400 var(--t-0)/1.6 var(--f-text);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--f-board); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 var(--s-4); color: var(--c-ink-strong); text-wrap: balance; }
h1 { font-size: var(--t-hero); letter-spacing: -0.025em; line-height: 0.98; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); line-height: 1.2; }
p, ul, ol, dl { margin: 0 0 var(--s-4); }
a { color: var(--c-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 650; }
.num, td, .ticket__val { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -4rem; background: var(--c-ink); color: var(--c-on-ink); padding: var(--s-2) var(--s-4); z-index: 10; }
.skip:focus { top: var(--s-2); }
.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.muted { color: var(--c-fg-muted); }
.small { font-size: var(--t--1); }

/* ---------- 4. En-tête ---------- */
.top { background: var(--c-kraft); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-strong); text-decoration: none; font: 700 1.05rem/1.1 var(--f-board); }
.brand__stamp { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 2px solid currentColor; border-radius: 50%; font-size: .78rem; letter-spacing: 0; }
.brand small { display: block; font: 400 .78rem/1.2 var(--f-text); color: var(--c-ink-strong); }
.top__cta { font: 700 .95rem/1 var(--f-board); color: var(--c-ink-strong); white-space: nowrap; }
@media (max-width: 359px) { .brand small { display: none; } }

/* ---------- 5. Le sac kraft (hero) et son bord dentelé — signature ---------- */
.bag { position: relative; background: var(--c-kraft); padding-block: var(--s-6) var(--s-8); margin-bottom: var(--edge); }
.bag::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--edge);
  background: conic-gradient(from -45deg at 50% 100%, var(--c-kraft) 90deg, transparent 0) 0 0 / calc(var(--edge) * 2) var(--edge) repeat-x;
}
.bag--slim { padding-block: var(--s-5) var(--s-6); }
.bag a:not(.btn) { color: var(--c-ink-strong); }
.hero { display: grid; gap: var(--s-6); align-items: start; }
.hero__lead { font-size: var(--t-1); line-height: 1.5; max-width: 34rem; color: var(--c-ink-strong); }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; margin-top: var(--s-5); }
@media (min-width: 900px) {
  .bag { padding-block: var(--s-8) var(--s-9); }
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
  .hero .board { margin-top: var(--s-2); transform: rotate(1.2deg); }
  .bag--slim { padding-block: var(--s-6) var(--s-7); }
}

/* ---------- 6. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: .7rem 1.35rem; border: 2px solid var(--c-ink-strong); border-radius: var(--r-field);
  background: var(--c-ink); color: var(--c-on-ink); font: 700 1.05rem/1.1 var(--f-board); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; box-shadow: var(--press);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .12s;
}
.btn:hover { background: var(--c-ink-strong); text-decoration: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink-900); }
.btn--ghost { background: transparent; color: var(--c-ink-strong); box-shadow: none; }
.btn--ghost:hover { background: color-mix(in oklch, var(--c-ink) 10%, transparent); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- 7. Le quadro de produção ---------- */
.board {
  background-color: var(--c-surface);
  background-image: linear-gradient(var(--c-grid) 1px, transparent 1px);
  background-size: 100% 2.5rem; background-position: 0 3.6rem;
  border: 1px solid var(--c-line); border-top: 6px solid var(--c-ink-strong);
  border-radius: var(--r-board); padding: var(--s-4) var(--s-4) var(--s-3);
  box-shadow: 0 1px 0 var(--c-kraft-edge), 0 14px 0 -8px oklch(0% 0 0 / .12);
}
.board__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.board__title { font: 700 1.2rem/1.2 var(--f-board); color: var(--c-ink-strong); margin: 0; }
.board__date { font-size: var(--t--1); color: var(--c-fg-muted); }
.board table { width: 100%; border-collapse: collapse; }
.board th, .board td { padding: 0; height: 2.5rem; text-align: left; vertical-align: middle; font-weight: 400; }
.board thead th { height: 1.6rem; font-size: var(--t--1); color: var(--c-fg-muted); }
.board td { font: 700 1.5rem/1 var(--f-board); color: var(--c-ink); text-align: right; letter-spacing: -0.02em; }
.board td small { font: 400 .78rem/1 var(--f-text); color: var(--c-fg-muted); letter-spacing: 0; margin-left: 2px; }
.board tbody th { font-weight: 600; padding-right: var(--s-2); }
.board__weigh { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 2px dashed var(--c-line); font-size: var(--t--1); }
.board__weigh div { display: flex; gap: var(--s-2); align-items: baseline; }
.board__weigh dt { color: var(--c-fg-muted); }
.board__weigh dd { margin: 0; font: 700 1.15rem/1 var(--f-board); color: var(--c-ink-strong); }

/* ---------- 8. Sections ---------- */
.sec { padding-block: var(--s-7); }
.sec--sunk { background: var(--c-sunk); }
.sec--kraft-soft { background: var(--c-kraft-soft); }
.sec__intro { max-width: var(--w-text); margin-bottom: var(--s-6); }
.sec__intro p { color: var(--c-fg-muted); font-size: var(--t-1); line-height: 1.5; }
@media (min-width: 900px) { .sec { padding-block: var(--s-8); } }

/* Promesse : trois faits, sans cartes */
.facts { display: grid; gap: var(--s-5); padding: 0; margin: 0; list-style: none; }
.facts li { border-top: 2px solid var(--c-ink-strong); padding-top: var(--s-3); }
.facts b { display: block; font: 700 var(--t-num)/1 var(--f-board); color: var(--c-ink); letter-spacing: -0.03em; margin-bottom: var(--s-2); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }

/* ---------- 9. Étiquette de balance (prix) ---------- */
.ticket {
  position: relative; max-width: 26rem; background: var(--c-surface); color: var(--c-fg);
  padding: var(--s-5) var(--s-5) var(--s-4); border: 1px solid var(--c-line);
  border-radius: 2px; box-shadow: 0 2px 0 var(--c-kraft-edge);
}
.ticket::before, .ticket::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: radial-gradient(circle at 6px 50%, var(--c-bg) 3px, transparent 3.5px) 0 0 / 12px 8px repeat-x; }
.ticket::before { top: -4px; }
.ticket::after { bottom: -4px; }
.ticket__name { font: 700 1.15rem/1.2 var(--f-board); margin: 0 0 var(--s-3); color: var(--c-ink-strong); }
.ticket__rows { margin: 0; }
.ticket__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px dotted var(--c-line); }
.ticket__row dt { color: var(--c-fg-muted); font-size: var(--t--1); }
.ticket__row dd { margin: 0; text-align: right; }
.ticket__val { font: 700 1.1rem/1.1 var(--f-board); }
.ticket__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-3); }
.ticket__total span { font-weight: 600; }
.ticket__price { font: 700 clamp(2.6rem, 2rem + 3vw, 3.6rem)/1 var(--f-board); color: var(--c-ink); letter-spacing: -0.03em; }
.ticket__note { margin: var(--s-3) 0 var(--s-4); font-size: var(--t--1); color: var(--c-fg-muted); }
.sec--buy .wrap { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .sec--buy .wrap { grid-template-columns: minmax(0, 1fr) 26rem; align-items: center; } }

/* ---------- 10. Formulaire ---------- */
.form { display: grid; gap: var(--s-5); }
.panel { margin: 0; padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-field); background: var(--c-surface); min-width: 0; }
.panel > legend { padding: 0 var(--s-2); margin-left: calc(var(--s-2) * -1); font: 700 var(--t-1)/1.2 var(--f-board); color: var(--c-ink-strong); }
.panel__hint { margin: var(--s-1) 0 var(--s-4); font-size: var(--t--1); color: var(--c-fg-muted); }
.grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: 2fr 1fr 1fr; } }
.field { display: grid; gap: var(--s-1); min-width: 0; align-content: start; }
.field label, .days__lbl { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: var(--t--1); color: var(--c-fg-muted); }
.input, .field input, .field textarea, .field select, .day input {
  width: 100%; min-width: 0; min-height: 2.9rem; padding: .6rem .7rem;
  border: 1.5px solid var(--slate-600); border-radius: var(--r-field); background: var(--c-surface); color: var(--c-fg);
  font: 400 1rem/1.4 var(--f-text);
}
.field textarea { min-height: 8.5rem; resize: vertical; font-variant-numeric: tabular-nums; }
.field input:focus-visible, .field textarea:focus-visible, .day input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-ink); }
.field input[aria-invalid="true"], .day input[aria-invalid="true"] { border-color: var(--c-alert); background: var(--c-alert-bg); }
.err { color: var(--c-alert); font-size: var(--t--1); font-weight: 600; margin: 0; }

/* Une ligne de produit = une ficha */
.prod { border-left: 6px solid var(--c-kraft); }
.prod > legend { display: flex; gap: var(--s-2); align-items: baseline; }
.prod__n { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--c-ink-strong); color: var(--c-on-ink); font-size: .9rem; }
.prod--empty { border-left-color: var(--c-line); }
.prod__grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .prod__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Les 7 jours : grille de petites cases, comme les colonnes du quadro */
.days { border: 0; padding: 0; margin: 0; min-width: 0; }
.days legend { padding: 0; margin-bottom: var(--s-2); }
.days__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.day { display: grid; gap: 2px; min-width: 0; }
.day label { font-size: .8rem; font-weight: 600; text-align: center; color: var(--c-fg-muted); }
.day label abbr { text-decoration: none; }
.day input { padding: .55rem 0; text-align: center; font: 700 1.05rem/1 var(--f-board); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.day input::-webkit-outer-spin-button, .day input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.day--weekend label { color: var(--c-ink); }
@media (min-width: 480px) { .days__row { gap: var(--s-2); } }

.more { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }
.form__send { display: grid; gap: var(--s-3); justify-items: start; }

/* ---------- 11. Tableau d'aperçu 7 dias ---------- */
.preview { background: var(--c-surface); border: 1px solid var(--c-line); border-top: 6px solid var(--c-ink-strong); border-radius: var(--r-board); }
.preview__head { padding: var(--s-4) var(--s-4) 0; }
.preview__head p { margin: 0; color: var(--c-fg-muted); font-size: var(--t--1); }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: var(--s-3) 0 var(--s-2); }
.scroller:focus-visible { outline-offset: -3px; }
.week { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .95rem; }
.week th, .week td { padding: .55rem .5rem; border-bottom: 1px solid var(--c-grid); }
.week thead th { font: 700 .95rem/1.2 var(--f-board); color: var(--c-fg-muted); text-align: right; border-bottom: 2px solid var(--c-ink-strong); }
.week thead th:first-child, .week tbody th { text-align: left; }
.week thead th:first-child { padding-left: var(--s-4); }
.week abbr { text-decoration: none; }
.week tbody th { position: sticky; left: 0; background: var(--c-surface); font-weight: 600; padding-left: var(--s-4); min-width: 8.5rem; }
.week td { text-align: right; font: 700 1.2rem/1 var(--f-board); color: var(--c-ink); }
.week td:last-child, .week thead th:last-child { padding-right: var(--s-4); }
.week .peak { background: color-mix(in oklch, var(--c-kraft) 28%, transparent); }
.week tfoot th, .week tfoot td { border-top: 2px dashed var(--c-line); border-bottom: 0; color: var(--c-ink-strong); }
.week tfoot th { position: sticky; left: 0; background: var(--c-surface); text-align: left; padding-left: var(--s-4); font-weight: 600; }
.preview__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--c-grid); }
.preview__foot p { margin: 0; font-size: var(--t--1); color: var(--c-fg-muted); max-width: 34rem; }

/* ---------- 12. Ce que vous recevez : les onglets du classeur ---------- */
.sheets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.sheet { display: grid; gap: var(--s-1) var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.sheet__tab {
  justify-self: start; display: inline-block; padding: .3rem .8rem .25rem; border: 1px solid var(--c-line); border-bottom: 3px solid var(--c-ink);
  border-radius: 4px 4px 0 0; background: var(--c-surface); font: 700 1rem/1.2 var(--f-board); color: var(--c-ink-strong); margin: 0;
}
.sheet p { margin: 0; max-width: 46rem; }
@media (min-width: 720px) { .sheet { grid-template-columns: 14rem minmax(0, 1fr); align-items: baseline; } }

/* ---------- 13. FAQ ---------- */
.faq { max-width: 48rem; border-top: 2px solid var(--c-ink-strong); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font: 700 var(--t-1)/1.25 var(--f-board); color: var(--c-ink-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font: 700 1.1rem/1 var(--f-text); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 var(--s-4); max-width: var(--w-text); }

/* ---------- 14. Article ---------- */
.crumbs { font-size: var(--t--1); margin-bottom: var(--s-4); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-kraft-edge); }
.byline { font-size: var(--t--1); color: var(--c-ink-strong); margin: var(--s-3) 0 0; }
.article { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--s-8); }
.prose { max-width: var(--w-text); min-width: 0; }
.prose h2 { font-size: var(--t-2); margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose > p:first-child { font-size: var(--t-1); line-height: 1.55; }
.toc { align-self: start; font-size: var(--t--1); border-top: 2px solid var(--c-ink-strong); padding-top: var(--s-3); }
.toc h2 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.toc ol { padding-left: 1.2rem; margin: 0; }
.toc li { margin-bottom: var(--s-1); }
@media (min-width: 1000px) {
  .article { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s-8); }
  .toc { position: sticky; top: var(--s-5); grid-column: 2; grid-row: 1; }
  .article > .prose { grid-column: 1; grid-row: 1; }
}
.tablebox { overflow-x: auto; margin: 0 0 var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-field); background: var(--c-surface); }
.tablebox table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tablebox caption { text-align: left; padding: var(--s-3) var(--s-3) 0; font-weight: 600; }
.tablebox th, .tablebox td { padding: .55rem .75rem; border-bottom: 1px solid var(--c-grid); text-align: left; }
.tablebox thead th { border-bottom: 2px solid var(--c-ink-strong); font: 700 .95rem/1.2 var(--f-board); }
.tablebox td.n { text-align: right; font-variant-numeric: tabular-nums; }
.formula { margin: 0 0 var(--s-5); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-left: 6px solid var(--c-ink); border-radius: var(--r-field); }
.formula code { display: block; font: 700 1.05rem/1.5 var(--f-board); color: var(--c-ink); white-space: normal; }
.formula p { margin: var(--s-2) 0 0; font-size: var(--t--1); color: var(--c-fg-muted); }
.cta-box { margin-top: var(--s-7); padding: var(--s-5); background: var(--c-kraft-soft); border-radius: var(--r-field); border: 1px solid var(--c-kraft-edge); }
.cta-box h2 { margin-top: 0; font-size: var(--t-2); }

/* ---------- 15. /obrigado : états ---------- */
.state { max-width: 40rem; margin: 0 auto; padding: var(--s-6) var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-top: 6px solid var(--c-ink-strong); border-radius: var(--r-board); }
.state--ok { border-top-color: var(--c-ok); }
.state--bad { border-top-color: var(--c-alert); }
.state__badge { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); padding: .3rem .7rem; border-radius: 999px; font-weight: 650; font-size: var(--t--1); background: var(--c-sunk); color: var(--c-ink-strong); }
.state--ok .state__badge { background: var(--c-ok-bg); color: var(--c-ok); }
.state--bad .state__badge { background: var(--c-alert-bg); color: var(--c-alert); }
.state h1 { font-size: var(--t-3); }
.code { display: inline-block; padding: .15rem .5rem; border: 1.5px dashed var(--c-kraft-edge); border-radius: var(--r-field); font: 700 1.05rem/1.4 var(--f-board); letter-spacing: .04em; color: var(--c-ink-strong); background: var(--c-kraft-soft); }
.oven { height: 10px; margin: var(--s-5) 0; border-radius: 999px; background: var(--c-sunk); overflow: hidden; }
.oven span { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--c-kraft); animation: bake 1.6s var(--ease) infinite alternate; }
@keyframes bake { from { transform: translateX(-10%); } to { transform: translateX(160%); } }
.steps { padding-left: 1.3rem; }
.steps li { margin-bottom: var(--s-2); }
.dl-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin: var(--s-5) 0; padding: var(--s-4); background: var(--c-sunk); border-radius: var(--r-field); }
.dl-file__name { font: 700 1.05rem/1.3 var(--f-board); color: var(--c-ink-strong); word-break: break-all; }
.dl-file__meta { display: block; font: 400 var(--t--1)/1.4 var(--f-text); color: var(--c-fg-muted); word-break: normal; }
.form--inline { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 560px) { .form--inline { grid-template-columns: minmax(0, 1fr) auto; } .form--inline .btn { margin-top: calc(.95rem * 1.6 + var(--s-1)); } }

/* ---------- 16. Page légale ---------- */
.legal { max-width: 46rem; padding-block: var(--s-6) var(--s-8); }
.legal h2 { font-size: var(--t-2); margin-top: var(--s-6); }
.facts-dl { margin: 0; border-top: 1px solid var(--c-line); }
.facts-dl div { display: grid; gap: var(--s-1) var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.facts-dl dt { font-weight: 650; color: var(--c-ink-strong); }
.facts-dl dd { margin: 0; }
@media (min-width: 640px) { .facts-dl div { grid-template-columns: 13rem minmax(0, 1fr); } }

/* ---------- 17. Pied de page ---------- */
.foot { background: var(--c-ink-strong); color: var(--c-on-ink); padding-block: var(--s-7) var(--s-6); margin-top: 0; }
.foot a { color: var(--c-on-ink); }
.foot__in { display: grid; gap: var(--s-5); }
.foot__mark { font: 700 clamp(1.6rem, 1.2rem + 2vw, 2.6rem)/1 var(--f-board); letter-spacing: -0.02em; margin: 0; }
.foot__ai { max-width: 36rem; margin: 0; color: var(--ink-100); }
.foot nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: 0; margin: 0; }
.foot__legal { font-size: var(--t--1); color: var(--ink-100); margin: 0; }
.foot :focus-visible { outline-color: var(--kraft-300); }
@media (min-width: 900px) { .foot__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ---------- 18. Mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero .board { transform: none; }
}
@media print { .top, .foot, .btn, .bag::after { display: none; } .bag { background: none; } }

/* ---------- Ajouts t238 (site dynamique) : alerte de formulaire, consentement, code copiable ---------- */
.alerta { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); background: var(--c-alert-bg); border-left: 4px solid var(--c-alert); border-radius: var(--r-field); }
.alerta p { margin: 0 0 var(--s-2); font-weight: 650; color: var(--c-alert); }
.alerta ul { margin: 0; padding-left: 1.2rem; }
.aviso-ok { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); background: var(--c-ok-bg); border-left: 4px solid var(--c-ok); color: var(--c-ok); font-weight: 650; border-radius: var(--r-field); }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t--1); margin: var(--s-4) 0; }
.consent input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--c-ink); }
.consent input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.codebox { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: var(--s-3) 0 var(--s-5); }
.codebox .code { font-size: var(--t-2); }