/* shared/frame.css — the frame every page wears: header (mark, «Spark», FR · EN), footer
   («Confidentialité · Assistance»), the page column, and the app's button and field styles.
   Colour only through var(--…) tokens from shared/tokens.css (see no-raw-colour.test.js). */

@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&family=Spectral:ital,wght@0,500;0,600;1,500&display=swap");

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ink100);color:var(--ink900);
  font:16px/24px "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Every page: header, the content (.w-main grows), then the footer pinned to the bottom. */
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
}
h1,.display{
  font:600 40px/44px "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  letter-spacing:-0.4px;color:var(--ink900);margin:0;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} }

/* ---------- header ---------- */
.w-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px;min-height:56px;width:100%;max-width:32rem;margin:0 auto;flex:none}
.w-hdr.wide{max-width:70rem}
.w-brand{display:flex;align-items:center;gap:8px;font:600 22px/28px "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;letter-spacing:-0.2px;color:var(--ink900);text-decoration:none;min-height:44px}
.w-brand .mark{width:25px;height:24px;display:block;color:var(--accent)}
.w-lang{display:inline-flex;padding:2px;border-radius:var(--radius-pill);background:var(--fill)}
/* Visual pill stays 32px tall (the mockup's .w-lang span), but every control must reach the 44px
   target: each button gets a 44px min-height hit area, with negative vertical margin so it doesn't
   grow the track, and an inner span draws the 32px pill look. */
.w-lang button{appearance:none;border:0;background:transparent;cursor:pointer;min-width:42px;min-height:44px;margin-block:-6px;padding:0;display:flex;align-items:center;justify-content:center;font:800 12px/16px "Mulish", ui-sans-serif, system-ui, sans-serif;letter-spacing:0.4px;color:var(--ink600)}
.w-lang button span{display:flex;align-items:center;justify-content:center;min-width:42px;min-height:32px;border-radius:var(--radius-pill)}
.w-lang button.on span{background:var(--surface);color:var(--ink900)}

/* ---------- content slot ---------- */
.w-main{flex:1;width:100%;max-width:32rem;margin:0 auto;padding:8px 16px 32px;display:flex;flex-direction:column;gap:16px}
.w-main.lpm{max-width:70rem;padding:0;gap:0}

/* ---------- footer ---------- */
.w-foot{display:flex;justify-content:center;align-items:center;padding:4px 16px 20px;border-top:0.5px solid var(--ink200);flex:none;font:500 13px/18px "Mulish", ui-sans-serif, system-ui, sans-serif;color:var(--ink600)}
.w-foot a{color:var(--ink600);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.w-foot .dot{color:var(--ink500)}

/* ---------- card ---------- */
/* --shadow-sm matches the mockup's --sh-sm; the hairline inset uses ink200, the nearest palette
   key to the mockup's --hair (there's no --line token in the generated palette). */
.card{background:var(--surface);border-radius:var(--radius-card);padding:16px;box-shadow:var(--shadow-sm), inset 0 0 0 0.5px var(--ink200)}

/* ---------- buttons (0b · ui/button.tsx) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;font:800 15px/20px "Mulish", ui-sans-serif, system-ui, sans-serif;border:0 solid transparent;cursor:pointer;min-height:44px;padding:12px 20px;border-radius:12px}
.btn-primary{background:var(--accent);color:var(--onAccent)}
.btn-secondary{border-width:1.5px;border-style:solid;border-color:var(--accent);color:var(--accentDeep);background:transparent}
.btn-tertiary{background:transparent;color:var(--accentDeep)}
.btn-google{background:var(--surface);border-width:1px;border-style:solid;border-color:var(--ink300);color:var(--ink900)}
.btn-apple{background:var(--ink900);color:var(--ink100)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- fields (0b · ui/field.tsx) ---------- */
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font:600 14px/20px "Mulish", ui-sans-serif, system-ui, sans-serif;color:var(--ink700)}
.field input{
  min-height:52px;border:1.5px solid var(--controlBorder);border-radius:var(--radius-md);
  background:var(--surface);padding:12px 16px;font:400 16px/22px "Mulish", ui-sans-serif, system-ui, sans-serif;
  color:var(--ink900);
}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.field input[aria-invalid="true"]{border-color:var(--status-cancelled-ink)}
.field .error{display:flex;gap:6px;align-items:flex-start;font:500 13px/18px "Mulish", ui-sans-serif, system-ui, sans-serif;color:var(--status-cancelled-ink)}