/* Charte graphique Tastime v1 (7 novembre 2026) : bleu profond / bleu-vert / bleu glacé / crème / sable.
   ~60 % crème ou blanc, ~30 % bleu profond, ~10 % accents. Pas d'ombre, pas de dégradé, pas de gras sur les titres. Police des titres : Outfit (libre, hébergée ici). */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/outfit-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bleu: #1d517b; --vert: #8cb7c4; --glace: #b2cdd5; --creme: #f5f1de; --sable: #ebc599; --blanc: #fff;
  --encre: #17384f; --doux: #4f6b7f; --trait: #d9e1e5; --trait-fort: #b7c6cd; --ok: #2c7a4b; --err: #a33a2c; --err-fond: #f6e3df;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--bleu); }
h1, h2, h3 { font-family: Outfit, system-ui, sans-serif; font-weight: 500; color: var(--bleu); }
.center { text-align: center; } .muted { color: var(--doux); } small { font-size: .85rem; }
.pad { padding: 40px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
.wrap.wide { max-width: 860px; }
.top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; max-width: 860px; margin: 0 auto; }
.top .brand { margin-right: auto; display: block; line-height: 0; }
.top .brand img { height: 30px; width: auto; display: block; } /* logo : jamais sous 90 px de large (charte) */
.top span { color: var(--doux); font-size: .9rem; }
.card { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 22px; margin: 14px 0; }
.card h1, .card h2 { margin: 0 0 6px; line-height: 1.25; }
.card h1 { font-size: 1.6rem; } .card h2 { font-size: 1.2rem; }
.hero { text-align: center; padding: 28px 8px 6px; }
.hero h1 { font-size: 1.9rem; margin: 0 0 6px; } .hero p { margin: 0; color: var(--doux); }
.hero.left { text-align: left; padding-top: 10px; }
label { display: block; font-weight: 500; margin: 14px 0 4px; font-size: .95rem; }
input, select { width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--blanc); color: var(--encre); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } .pad { padding: 24px 8px; } }
.hint { font-size: .85rem; color: var(--doux); margin-top: 4px; }
.hint.ok { color: var(--ok); } .hint.bad { color: var(--err); }
.btn { display: inline-block; border: 0; border-radius: 12px; padding: 12px 18px; font: inherit; font-family: Outfit, system-ui, sans-serif; font-weight: 500; cursor: pointer; background: var(--bleu); color: var(--creme); text-decoration: none; text-align: center; }
.btn:hover { background: #17446a; }
.btn.block { display: block; width: 100%; margin-top: 18px; }
.btn.light { background: var(--glace); color: var(--bleu); } .btn.light:hover { background: #a2c0ca; }
.btn[disabled] { opacity: .55; cursor: default; }
.alert { border-radius: 12px; padding: 10px 14px; margin: 12px 0; font-size: .95rem; background: var(--glace); color: var(--encre); }
.alert.err { background: var(--err-fond); color: var(--err); } .alert.ok { background: var(--glace); color: var(--encre); } .alert.warn { background: var(--sable); color: var(--encre); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 16px; }
.check input { width: auto; margin-top: 4px; }
.links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: .92rem; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 500; background: var(--glace); color: var(--bleu); }
.pill.ok { background: var(--glace); color: var(--bleu); } .pill.warn { background: var(--sable); color: var(--bleu); }
.addr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--creme); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; font-weight: 500; word-break: break-all; }
.addr.center { justify-content: center; }
.steps { padding-left: 20px; } .steps li { margin: 4px 0; }
.sr { position: absolute; left: -9999px; }
.card.off { border: 1px dashed var(--trait-fort); background: #faf8ec; } .sub-state { margin-top: 10px; }