/* Calendrier du Bal des Artisans — feuille de style, reprise de la maquette validée.
   Colonne de téléphone, centrée sur grand écran. Chaque état est dit par un mot ; la couleur s'ajoute.
   Palette « boutique » (validée le 5 novembre 2026, tirée d'une photo de la boutique) : vert-de-gris des meubles
   peints en couleur d'action, greige des murs et du sol en fond, noyer en encre, chêne clair en jaune des guides. */
:root {
  --outer: #e9e4dc; --bg: #f5f2ed; --surface: #ffffff; --ink: #2a2622; --muted: #625a52; --line: #d8d1c7;
  --accent: #3f6f68; --accent-ink: #ffffff; --accent-soft: #e1ece9; --mine: #bfd6d0;
  --red: #a23a22; --red-soft: #f9e8e2; --orange: #8f5214; --orange-soft: #f8ecdd; --green: #4a6b2a; --green-soft: #e7eedc;
  --hatch: #cfc7bc;
  /* Guides pas à pas : un jaune, pour que l'aide se distingue de l'interface. */
  --guide: #e9bc2a; --guide-ink: #5a4200; --guide-soft: #fbf1c9; --guide-line: #e0c66a;
  /* Une seule famille, IBM Plex Sans (public/fonts/) ; la hiérarchie se fait par la graisse et la taille. */
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--body);
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --outer: #0f0e0d; --bg: #171614; --surface: #211f1c; --ink: #ece7df; --muted: #aaa196; --line: #3a3631;
    --accent: #8fc1b8; --accent-ink: #0f1f1c; --accent-soft: #24403b; --mine: #2d5048;
    --red: #f0998a; --red-soft: #3d2420; --orange: #eeb074; --orange-soft: #3a2b1c; --green: #a9cf86; --green-soft: #243320;
    --hatch: #4a443d;
    --guide: #f0cf52; --guide-ink: #ffe9a0; --guide-soft: #3b3315; --guide-line: #6b5a1c;
  }
}
/* ---------- Palette « bleu » (celle de la maquette d'origine, gardée pour comparaison) ----------
   Aperçu : ?palette=bleu dans l'adresse ; ?palette= pour revenir à la palette boutique. */
[data-palette="bleu"] {
  --outer: #e6e8ec; --bg: #f5f6f3; --surface: #ffffff; --ink: #1b2130; --muted: #586174; --line: #d6dae2;
  --accent: #2c4a9a; --accent-ink: #ffffff; --accent-soft: #e2e8f7; --mine: #c9d5f3;
  --red: #a8261b; --red-soft: #fbe9e7; --orange: #9a4a06; --orange-soft: #fbefe2; --green: #276b45; --green-soft: #e3f2e8;
  --hatch: #c7cbd3;
  --guide: #f2c200; --guide-ink: #5c4400; --guide-soft: #fff6cc; --guide-line: #e6c86a;
}
@media (prefers-color-scheme: dark) {
  [data-palette="bleu"] {
    --outer: #0d0f13; --bg: #15181e; --surface: #1d212a; --ink: #e9ebf0; --muted: #a4abba; --line: #343a46;
    --accent: #93abee; --accent-ink: #10172b; --accent-soft: #263257; --mine: #2f3c66;
    --red: #f2958b; --red-soft: #3b2120; --orange: #f0b077; --orange-soft: #3a2b1d; --green: #86d3a4; --green-soft: #1d3326;
    --hatch: #454c5a;
    --guide: #f5d04c; --guide-ink: #ffe99a; --guide-soft: #3a3214; --guide-line: #6b5a1c;
  }
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--outer); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--bg); display: flex; flex-direction: column; position: relative; box-shadow: 0 0 0 1px var(--line); }
#shell { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.apphead { position: sticky; top: 0; z-index: 16; min-height: 56px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: border-color .2s; }
.apphead.scrolled { border-bottom-color: var(--line); }
.apphead .brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 4px 4px 0; color: inherit; text-decoration: none; border-radius: 8px; }
.apphead .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.apphead .wordmark { font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.apphead .who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.apphead .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.apphead .space { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main { flex: 1; padding-block: 18px 28px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 18px; align-content: start; }
main > * { min-width: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
h2 { font-weight: 600; font-size: 20px; line-height: 1.2; }
h3 { font-size: 16px; }
h2.h3 { font-family: var(--body); font-size: 16px; font-weight: 700; }
main h1:focus { outline: none; }
main h1:focus-visible { outline: 3px solid var(--accent); }
p { margin: 0; }
.lead { color: var(--muted); }
.muted { color: var(--muted); font-size: 14px; }
.stack { display: grid; gap: 10px; }
.stack-s { display: grid; gap: 6px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.back { justify-self: start; background: none; border: 0; color: var(--accent); padding: 6px 0; cursor: pointer; font-weight: 600; min-height: 44px; min-width: 44px; text-decoration: none; display: inline-flex; align-items: center; }
.back .ico { width: 1.2em; height: 1.2em; margin-right: 2px; }
a.inl { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
a.inl .ico { width: 1em; height: 1em; }

.btn { display: inline-flex; justify-content: center; align-items: center; text-align: center; gap: 6px; min-height: 48px; padding: 10px 16px; border-radius: var(--r); border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.sec { background: transparent; color: var(--accent); }
.btn.warn { background: var(--red); border-color: var(--red); color: #fff; }
/* Danger : un bouton qui demande confirmation se reconnaît avant d'être touché. */
.btn[data-ask] { background: transparent; border-color: var(--red); color: var(--red); }
.btn[data-ask]:hover { background: var(--red-soft); }
.btn.small { min-height: 44px; padding: 6px 12px; font-size: 15px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.busy { opacity: .7; cursor: progress; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; }
.flash { background: var(--green-soft); color: var(--ink); border: 1px solid var(--green); border-radius: var(--r); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; }
.flash .ico { width: 1.35em; height: 1.35em; color: var(--green); margin-top: 1px; }
.flash.error .ico { color: var(--red); }
.flash.error { background: var(--red-soft); border-color: var(--red); }
.notice { background: var(--orange-soft); border: 1px solid var(--orange); border-radius: var(--r); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; }
.notice .ico { width: 1.35em; height: 1.35em; color: var(--orange); margin-top: 1px; }
.notice strong { color: var(--orange); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field { min-height: 48px; padding: 8px 10px; border: 1px solid var(--muted); border-radius: 8px; background: var(--surface); width: 100%; }
.field:disabled { background: var(--bg); border-style: dashed; border-color: var(--line); color: var(--muted); cursor: not-allowed; }
label:has(> .field:disabled) > span { color: var(--muted); }
.stack-s:has(.field:disabled) > label { color: var(--muted); }
.pw { position: relative; }
.pw .field { padding-right: 52px; }
.pw-eye { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 46px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.pw-eye[aria-pressed="true"] { color: var(--accent); }
.pw-eye:disabled { opacity: .4; cursor: not-allowed; }
.pw-eye .ico { width: 22px; height: 22px; }
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.pw-rules li { display: inline-flex; align-items: center; gap: 4px; }
.pw-rules .ico { width: 1em; height: 1em; }
.pw-rules li.ok { color: var(--green); }
label.stack-s > span:first-child { font-weight: 600; font-size: 15px; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.last-resort { border-top: 2px dashed var(--line); padding-top: 14px; margin-top: 8px; }

/* Mentions : toujours un mot ; la couleur et le motif s'ajoutent. */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.2; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap; }
.tag.vous { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.tag.manque { border: 1.5px dashed var(--red); color: var(--red); background: var(--red-soft); font-weight: 600; }
.tag.trop { border: 3px double var(--orange); color: var(--orange); background: var(--orange-soft); font-weight: 600; }
.tag.ech { border: 1.5px dotted var(--ink); }
.tag.urg { border: 1.5px dashed var(--orange); color: var(--orange); font-weight: 600; }
.tag.refus { background: repeating-linear-gradient(90deg, transparent 0 3px, var(--line) 3px 4px); }
.tag.ferme { font-weight: 600; }
.tag.ok { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.tag.today { border: 2px solid var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tag.state { font-weight: 700; text-transform: lowercase; letter-spacing: .02em; }
.tag.admin { border-style: solid; border-color: var(--muted); color: var(--muted); }
.tag.off { color: var(--muted); border-style: dashed; }

/* Mois et semaines */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; gap: 3px; }
.tabs button { border: 0; background: transparent; border-radius: 7px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--muted); padding: 4px 6px; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.week { display: grid; gap: 0; }
.week h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 2px 6px; font-weight: 600; }
.day { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: start; padding: 10px 10px; background: var(--surface); border: 1px solid var(--line); border-top-width: 0; text-align: left; width: 100%; color: inherit; font: inherit; text-decoration: none; }
.week .day:first-of-type { border-top-width: 1px; border-radius: var(--r) var(--r) 0 0; }
.week .day:last-child { border-radius: 0 0 var(--r) var(--r); }
.week .day:only-of-type { border-radius: var(--r); }
button.day, a.day { cursor: pointer; }
button.day:hover, a.day:hover { background: var(--accent-soft); }
.day.mine { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 7px) left top / 9px 100% no-repeat, var(--accent-soft); padding-left: 18px; }
.day.closed { background: repeating-linear-gradient(45deg, var(--muted) 0 1.5px, transparent 1.5px 6px) left top / 9px 100% no-repeat, var(--surface); padding-left: 18px; color: var(--muted); }
.day.past { opacity: .72; }
.day .go { color: var(--accent); font-weight: 700; align-self: center; }
.day-acts { background: var(--surface); border: 1px solid var(--line); border-top: 0; padding: 10px; }
.dd { font-variant-numeric: tabular-nums; line-height: 1.1; }
.dd .w { font-size: 13px; color: var(--muted); display: block; }
.dd .n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.names { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.nm { font-weight: 600; }
.nm + .nm::before { content: "et "; font-weight: 400; color: var(--muted); }

/* Listes à choix */
.choices { display: grid; gap: 8px; }
.choice { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.choice .t { font-weight: 700; }
.choice .s { color: var(--muted); font-size: 14px; }
.choice .w { color: var(--orange); font-size: 14px; font-weight: 600; }
fieldset.choices { border: 0; padding: 0; margin: 0; }
fieldset.choices legend { margin-bottom: 6px; }

.list { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line); min-width: 0; text-decoration: none; color: inherit; }
.li:first-child { border-top: 0; }
.li > div { min-width: 0; }
button.li, a.li { background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.list > button.li:first-child, .list > a.li:first-child { border-top: 0; }
button.li:hover, a.li:hover { background: var(--accent-soft); }
.li .t { font-weight: 600; }
.li .go { color: var(--accent); font-weight: 700; }

.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 15px; }
th, td { padding: 9px 10px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; color: var(--muted); font-weight: 600; border-top: 0; vertical-align: bottom; line-height: 1.25; }
th .unit { display: block; font-weight: 400; }
td.num, th.num { text-align: right; }
tbody th { font-weight: 600; text-align: left; font-size: 15px; color: var(--ink); }
tr.me th, tr.me td { font-weight: 700; background: var(--accent-soft); }
tr.me th { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 7px) left top / 6px 100% no-repeat, var(--accent-soft); padding-left: 14px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sel { user-select: all; font-variant-numeric: tabular-nums; }
ul.plain { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.mailview { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }

/* Barre du bas */
.tabbar { position: sticky; bottom: 0; z-index: 15; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar a, .tabbar button { border: 0; background: none; min-height: 58px; min-width: 44px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 6px 2px 4px; border-top: 3px solid transparent; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tabbar .ico { width: 24px; height: 24px; }
.tabbar a[aria-current="page"], .tabbar button[aria-current="page"] { color: var(--accent); border-top-color: var(--accent); }

/* ---------- Icônes (public/icons.js) ---------- */
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.tag .ico { width: 1.05em; height: 1.05em; }
.li > .ico { width: 1.4em; height: 1.4em; color: var(--accent); }
.li > .t { flex: 1; }
.li .go .ico, .day .go .ico { width: 1.1em; height: 1.1em; }
.kv dt .ico, .muted .ico, .choice .w .ico { width: 1.05em; height: 1.05em; margin-right: 4px; }
.choice .w .ico { color: var(--orange); }
.with-ico { display: flex; align-items: center; gap: 10px; }
h1.with-ico .ico { width: 1.1em; height: 1.1em; color: var(--accent); }
.btn .ico { width: 1.2em; height: 1.2em; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.features li { display: flex; gap: 12px; align-items: flex-start; }
.features li > span { flex: 1; }
.features li:nth-child(even) .ico { order: 2; }
.features .ico { width: 1.6em; height: 1.6em; color: var(--accent); margin-top: 1px; }

/* ---------- Guides pas à pas ---------- */
#guide { position: fixed; z-index: 14; left: 50%; transform: translateX(-50%); width: min(480px, 100vw); bottom: calc(58px + env(safe-area-inset-bottom, 0px)); background: var(--guide-soft); color: var(--ink); border: 1px solid var(--guide-line); border-top: 3px solid var(--guide); padding: 12px 14px; display: grid; gap: 8px; box-shadow: 0 -6px 20px rgba(0,0,0,.15); font-size: 15px; }
#guide p { margin: 0; }
#guide .g-head { display: flex; align-items: center; gap: 8px; }
#guide .g-head .ico { width: 1.3em; height: 1.3em; color: var(--guide-ink); }
#guide .g-head strong { color: var(--guide-ink); }
#guide .g-n { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
#guide .check { font-size: 14px; }
#guide .check input { accent-color: var(--guide-ink); }
#guide .btn { background: var(--guide); border-color: var(--guide); color: #1b2130; }
#guide .btn.sec { background: transparent; color: var(--guide-ink); border-color: var(--guide-line); }
.btn.warn:hover { filter: brightness(1.08); }
.guide-target { outline: 3px solid var(--guide) !important; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px var(--guide-soft); }
body:has(#guide) #main { padding-bottom: 180px; }
.card.guides { border-top: 3px solid var(--guide); }
.card.guides > h2 .ico, h1.guides > .ico { color: var(--guide-ink); }
/* Tout ce qui appartient aux guides est en jaune, jamais en bleu. */
.guides .btn { background: var(--guide); border-color: var(--guide); color: #1b2130; }
.guides .btn.sec { background: transparent; color: var(--guide-ink); border-color: var(--guide); }
.guides .btn.sec:hover { background: var(--guide-soft); }
.guides .btn .ico { color: inherit; }
.guides .check input { accent-color: var(--guide); }
.guides a.inl { color: var(--guide-ink); }
/* Confirmation sur place d'une action dangereuse */
.confirm { flex-basis: 100%; display: grid; gap: 8px; padding: 10px 12px; border-left: 3px solid var(--red); background: var(--red-soft); border-radius: 6px; }
.confirm p { margin: 0; }
.confirm .btn.sec { color: var(--red); border-color: var(--red); }
.confirm .btn.sec:hover { background: var(--red-soft); }
.li:has(> .confirm), .row:has(> .confirm), dd:has(> .confirm) { flex-wrap: wrap; }
dd:has(> .confirm) { display: grid; gap: 6px; }