/* =====================================================================
   Ziggy — feuille de style unique
   Ambiance « village cartoon » reprise de la maquette validée.
   Rouge corail (#FF4D5E) réservé aux alertes.
   ===================================================================== */

:root {
  --bg: #FFF6E9;
  --ink: #3A3226;
  --ink-2: #4A3B28;
  --ink-soft: #6B5C46;
  --muted: #9A8B73;
  --muted-2: #B7A88F;
  --line: #F0E6D4;

  --orange: #FF8A3D;
  --orange-dark: #E8701F;
  --sun: #FFC531;
  --sun-soft: #FFE2B8;
  --sun-pale: #FFE9C9;
  --green: #8BC53F;
  --green-dark: #4C8A1C;
  --turquoise: #17BEBB;
  --blue: #2C9FD6;
  --blue-soft: #DFF3FF;
  --coral: #FF4D5E;          /* alertes uniquement */
  --coral-dark: #D22F3F;
  --neutral-badge: #7F93AB;  /* compteur neutre gris-bleu */

  --font: "Avenir Next Rounded", "Nunito", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
}

/* ---------- Animations ---------- */
@keyframes zbounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes zpop    { 0% { transform: scale(.4); opacity: 0 } 70% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }
@keyframes zfloat  { 0%, 100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-6px) rotate(2deg) } }
@keyframes zshine  { 0% { opacity: .35 } 50% { opacity: .8 } 100% { opacity: .35 } }
@keyframes zfall   { 0% { transform: translateY(-10px) rotate(0); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(90px) rotate(320deg); opacity: 0 } }
@keyframes zin     { from { transform: translateY(14px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes zglow   { 0%, 100% { box-shadow: 0 6px 0 var(--tile-shadow), 0 0 0 0 var(--tile-soft) } 50% { box-shadow: 0 6px 0 var(--tile-shadow), 0 0 22px 4px var(--tile-soft) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); }
input, button { font-family: inherit; }
button { color: inherit; }
h2, h3 { margin: 0; font-weight: 800; }
[hidden] { display: none !important; }
.z-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.z-page {
  min-height: 100vh;
  background: radial-gradient(900px 600px at 20% 0%, #FFF9EC 0%, #FFF6E9 40%, #F2FBFF 100%);
  padding: 22px 26px 34px;
}

/* ---------- Boutons génériques ---------- */
.z-btn-green {
  border: none; cursor: pointer;
  background: linear-gradient(150deg, #8BC53F, #5FA524);
  color: #fff; font-weight: 800; font-size: 15px;
  padding: 10px 20px; border-radius: 20px;
  box-shadow: 0 4px 0 var(--green-dark);
  transition: transform .12s, box-shadow .12s;
}
.z-btn-green:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-dark); }

/* ---------- Logo ---------- */
.z-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.z-brand--center { justify-content: center; }
.z-logo {
  width: 46px; height: 46px; border-radius: 16px;
  background: linear-gradient(150deg, #FFC531, #FF8A3D);
  box-shadow: 0 6px 0 var(--orange-dark), 0 10px 18px rgba(255, 138, 61, .35);
  display: grid; place-items: center;
  font-size: 24px; font-weight: 800; color: #fff;
}
.z-brand-name { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--ink-2); }

/* ---------- Barre supérieure ---------- */
.z-top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 18px; max-width: 1720px; margin: 0 auto 22px;
}

.z-capture { position: relative; flex: 1 1 340px; min-width: 280px; margin: 0; }
.z-capture-tip {
  position: absolute; left: 22px; top: -9px; width: 16px; height: 16px;
  background: #fff; border-radius: 4px; transform: rotate(45deg);
  box-shadow: -3px -3px 0 var(--sun-soft);
}
.z-capture-box {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 3px solid var(--sun-soft); border-radius: 28px;
  padding: 10px 12px 10px 20px;
  box-shadow: 0 6px 0 rgba(255, 197, 49, .25);
  transition: border-color .2s;
}
.z-capture-box:focus-within { border-color: var(--sun); }
.z-capture-icon { font-size: 20px; }
#capture-input {
  flex: 1; min-width: 0; border: none; outline: none;
  font-size: 18px; font-weight: 600; color: var(--ink-2); background: transparent;
}
#capture-input::placeholder { color: var(--muted-2); }
.z-kbd {
  font: 700 11px var(--font); color: var(--muted-2);
  border: 2px solid var(--line); border-radius: 8px; padding: 2px 6px;
}
/* Rappel affiché seulement sur l'onglet Capture du mobile */
.z-capture-hint { display: none; margin: 12px 4px 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.z-capture-box:focus-within .z-kbd { display: none; }

.z-search {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 3px solid var(--blue-soft); border-radius: 24px;
  padding: 8px 18px 8px 14px;
  box-shadow: 0 5px 0 rgba(87, 199, 255, .2);
  flex: 1 1 200px; min-width: 170px; max-width: 320px;
}
.z-search span { font-size: 19px; }
#search-input {
  border: none; outline: none; flex: 1; min-width: 0;
  font-size: 15px; font-weight: 600; color: var(--ink-2); background: transparent;
}
#search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Boîte aux lettres (compteur d'inbox, jamais rouge) */
.z-mailbox {
  flex: none; cursor: pointer;
  border: 3px solid var(--sun-soft); background: #fff; border-radius: 24px;
  padding: 8px 18px 8px 12px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 5px 0 rgba(255, 197, 49, .25);
}
.z-mailbox-art { position: relative; width: 52px; height: 44px; display: block; }
.z-mb-body { position: absolute; left: 6px; bottom: 0; width: 40px; height: 26px; border-radius: 10px 10px 6px 6px; background: linear-gradient(160deg, #57C7FF, #2C9FD6); }
.z-mb-lid  { position: absolute; left: 6px; bottom: 20px; width: 40px; height: 14px; border-radius: 12px 12px 0 0; background: #1F8FC4; }
.z-mb-letter { position: absolute; width: 11px; height: 14px; border-radius: 2px; box-shadow: 0 1px 0 #E3CFA6; }
.z-mb-letter--1 { left: 14px; top: 0; background: #FFF3D6; transform: rotate(-14deg); animation: zfloat 2.6s ease-in-out infinite; }
.z-mb-letter--2 { left: 26px; top: 2px; background: #fff; transform: rotate(12deg); animation: zfloat 3.1s ease-in-out infinite; }
.z-mailbox.is-empty .z-mb-letter { display: none; }
.z-mailbox-text { text-align: left; display: block; }
.z-mailbox-count { display: block; font-size: 22px; font-weight: 800; line-height: 1; color: var(--blue); }
.z-mailbox-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .3px; }
.z-mailbox.is-full { border-color: #FFD1AC; }
.z-mailbox.is-full .z-mailbox-count { color: var(--orange); } /* > 20 : orange doux */
.z-mailbox.is-bump .z-mailbox-count { animation: zpop .45s ease-out; }

.z-logout { margin: 0; flex: none; }
.z-logout button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--line); background: #fff; color: var(--muted-2);
  font-size: 16px; font-weight: 800;
}
.z-logout button:hover { color: var(--ink-soft); }

/* ---------- Panneaux dépliables ---------- */
.z-panel {
  max-width: 1720px; margin: 0 auto 18px; background: #fff;
  border-radius: 24px; padding: 16px 22px; animation: zin .25s ease-out;
}
.z-panel--blue   { border: 3px solid var(--blue-soft); box-shadow: 0 8px 22px rgba(44, 159, 214, .14); }
.z-panel--orange { border: 3px solid var(--sun-soft);  box-shadow: 0 8px 22px rgba(255, 138, 61, .16); }
.z-panel-title { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .6px; margin-bottom: 10px; }
.z-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 2px dashed var(--line);
}
.z-row-icon { font-size: 18px; }
.z-row-title { font-size: 16px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.z-row-sub { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: auto; white-space: nowrap; }
.z-row-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); flex: none; }
.z-row-empty { font-size: 15px; font-weight: 700; color: var(--muted-2); padding: 6px 0; }
.z-row mark { background: #FFF0B3; color: inherit; border-radius: 4px; padding: 0 2px; }

/* ---------- Village : trois colonnes ---------- */
.z-village {
  max-width: 1720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start;
}
.z-tiles {
  flex: 1 1 240px; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 18px;
}

/* Tuile de domaine */
.z-tile {
  --tile-color: #FF8A3D;
  --tile-soft: #FFE2C7;
  --tile-shadow: rgba(255, 138, 61, .22);
  cursor: pointer; font: inherit;
  background: #fff; border: 3px solid var(--tile-soft); border-radius: 24px;
  padding: 14px 10px 12px; text-align: center; position: relative;
  box-shadow: 0 6px 0 var(--tile-shadow);
  transition: transform .15s, box-shadow .15s;
  animation: zin .35s ease-out both;
}
.z-tile:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--tile-shadow); }
.z-tile:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--tile-shadow); }
.z-tile-art { width: 56px; height: 56px; display: block; margin: 0 auto; }
.z-tile-emoji { font-size: 40px; line-height: 56px; display: block; }
.z-tile-name { font-size: 14px; font-weight: 800; color: var(--ink-2); margin-top: 4px; }
/* Pastille rouge : uniquement échéance <= aujourd'hui */
.z-badge-late {
  position: absolute; top: 8px; right: 10px;
  min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
  background: var(--coral); color: #fff; font-size: 13px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--coral-dark);
  animation: zbounce 1.4s ease-in-out infinite;
}
/* Compteur neutre : next + scheduled */
.z-badge-open {
  position: absolute; top: 10px; left: 10px;
  font-size: 12px; font-weight: 800; color: var(--neutral-badge);
}
/* Tuile calme : rien en retard → légère lueur */
.z-tile.is-calm { animation: zin .35s ease-out both, zglow 4s ease-in-out .4s infinite; }

/* ---------- Carte du moment ---------- */
.z-moment { flex: 3 1 460px; min-width: 0; }
.z-moment-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px; padding: 0 6px;
}
.z-moment-title { font-size: 15px; color: var(--muted); letter-spacing: .8px; }
.z-moment-remaining { font-size: 14px; font-weight: 700; color: var(--muted-2); }

.z-card-stage { perspective: 1200px; }
.z-card {
  position: relative;
  transition: transform .5s cubic-bezier(.4, 1.4, .5, 1), opacity .35s;
  background: #fff; border: 4px solid var(--sun-soft); border-radius: 34px;
  padding: 30px 34px 26px;
  box-shadow: 0 14px 0 rgba(255, 197, 49, .22), 0 26px 40px rgba(120, 90, 40, .12);
}
.z-card.is-flipping { transform: rotateY(84deg) scale(.94); opacity: .25; }
.z-card.is-entering { animation: zin .4s cubic-bezier(.4, 1.4, .5, 1); }

.z-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; min-height: 34px; }
.z-card-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 0 5px #E4F3CB; }
.z-card-domain { font-size: 15px; font-weight: 800; letter-spacing: .4px; }
.z-card-due {
  margin-left: auto; font-size: 14px; font-weight: 800;
  color: var(--ink-soft); background: #FFF0D4; padding: 7px 16px; border-radius: 16px; white-space: nowrap;
}
.z-card-due.is-late  { color: #fff; background: var(--coral); }
.z-card-due.is-today { color: #fff; background: var(--orange); }
.z-card-due:empty { display: none; }

.z-card-title {
  font-size: 40px; line-height: 1.15; color: var(--ink); letter-spacing: -.8px;
  text-wrap: pretty; margin-bottom: 6px; overflow-wrap: anywhere;
}
.z-card-context { font-size: 17px; font-weight: 600; color: var(--muted); margin-bottom: 22px; min-height: 1em; }

.z-refs-toggle {
  width: 100%; text-align: left; cursor: pointer;
  border: 3px dashed #EFE2CC; background: #FFFCF5; border-radius: 20px;
  padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; color: var(--muted);
}
.z-refs-count {
  font-size: 12px; font-weight: 800; color: var(--muted);
  background: #FFF0D4; border-radius: 10px; padding: 1px 8px;
}
.z-refs-count:empty { display: none; }
.z-refs-chevron { margin-left: auto; font-size: 13px; }
.z-refs { margin-top: 10px; background: #FFFCF5; border-radius: 20px; padding: 6px 18px 12px; animation: zin .2s ease-out; }
.z-ref {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  font-size: 15px; font-weight: 700; color: var(--ink-soft);
  border-top: 2px dashed var(--line);
}
.z-ref:first-child { border-top: none; }

.z-card-actions { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 28px; }
.z-round {
  cursor: pointer; border: none; border-radius: 50%; color: #fff; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .12s, box-shadow .12s;
}
.z-round-icon { display: block; line-height: 1; }
.z-round--done {
  width: 108px; height: 108px; font-size: 17px;
  background: linear-gradient(160deg, #A5DC55, #6FB32A);
  box-shadow: 0 8px 0 var(--green-dark), 0 16px 26px rgba(111, 179, 42, .35);
}
.z-round--done .z-round-icon { font-size: 34px; }
.z-round--done:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--green-dark), 0 6px 12px rgba(111, 179, 42, .35); }
.z-round--defer {
  width: 92px; height: 92px; font-size: 15px;
  background: linear-gradient(160deg, #FFB160, #FF8A3D);
  box-shadow: 0 8px 0 var(--orange-dark), 0 16px 26px rgba(255, 138, 61, .3);
}
.z-round--defer .z-round-icon { font-size: 28px; }
.z-round--defer:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--orange-dark); }
.z-round:disabled { filter: grayscale(.6); opacity: .5; cursor: default; }

.z-defer-wrap { position: relative; }
.z-defer-menu {
  position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%);
  z-index: 20; min-width: 190px;
  background: #fff; border: 3px solid #FFD1AC; border-radius: 22px; padding: 8px;
  box-shadow: 0 8px 0 rgba(255, 138, 61, .2), 0 18px 30px rgba(120, 90, 40, .15);
  display: flex; flex-direction: column; gap: 4px;
  animation: zin .18s ease-out;
}
.z-defer-menu button, .z-defer-date {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: none; background: transparent; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 800; color: var(--ink-soft);
  padding: 9px 14px; border-radius: 14px;
}
.z-defer-menu button:hover, .z-defer-date:hover { background: #FFF0D4; }
.z-defer-date input {
  border: 2px solid var(--line); border-radius: 10px; padding: 3px 6px;
  font: 700 13px var(--font); color: var(--ink-soft); width: 130px;
}

.z-skip {
  position: absolute; right: 22px; bottom: 18px;
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 800; color: var(--muted-2); padding: 6px 10px; border-radius: 12px;
}
.z-skip:hover { color: var(--ink-soft); background: #FFF6E4; }

/* Carte vide : village en fête */
.z-card.is-empty .z-refs-toggle,
.z-card.is-empty .z-card-actions,
.z-card.is-empty .z-skip { display: none; }

/* ---------- Bande basse ---------- */
.z-bottom {
  max-width: 1720px; margin: 30px auto 0;
  display: flex; flex-wrap: wrap; gap: 26px; align-items: stretch;
}
.z-section-title { font-size: 13px; color: var(--muted); letter-spacing: .8px; margin-bottom: 14px; }

.z-week {
  flex: 3 1 520px; min-width: 0; background: #fff;
  border: 3px solid var(--sun-pale); border-radius: 30px;
  padding: 18px 24px 22px; box-shadow: 0 8px 0 rgba(255, 197, 49, .18);
}
.z-week-path { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 14px; }
.z-day {
  background: #FBFAF6; border: 3px solid var(--line); border-radius: 22px;
  padding: 12px 10px; min-height: 118px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.z-day.is-today { background: #FFF6E4; border-color: var(--sun); }
.z-day-head { display: flex; align-items: baseline; gap: 6px; }
.z-day-label { font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.z-day-num { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.z-token {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: #fff; border: none; border-radius: 14px; padding: 6px 8px; cursor: pointer; text-align: left;
  box-shadow: 0 2px 0 rgba(120, 90, 40, .1);
  transition: transform .12s;
  animation: zpop .35s ease-out both;
}
.z-token:hover { transform: translateY(-2px); }
.z-token-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.z-token-title {
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.25; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.z-reward {
  flex: 1 1 260px; min-width: 0; position: relative; overflow: hidden;
  background: #FFFDF7; border: 3px solid var(--sun-pale); border-radius: 30px;
  padding: 20px 22px; box-shadow: 0 8px 0 rgba(255, 197, 49, .18);
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  transition: background .6s;
}
.z-reward.is-party { background: linear-gradient(160deg, #FFFBE8, #EAFBE7); }
.z-reward-head { display: flex; align-items: center; gap: 12px; }
.z-reward-icon { font-size: 34px; animation: zfloat 3s ease-in-out infinite; }
.z-reward-count { font-size: 26px; font-weight: 800; line-height: 1; color: var(--ink-2); }
.z-reward-count.is-bump { animation: zpop .45s ease-out; }
.z-reward-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.z-gauge { height: 16px; border-radius: 10px; background: #FFF0D4; overflow: hidden; }
.z-gauge-fill { height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, #FFC531, #8BC53F); transition: width .5s; }
.z-reward-text { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.z-reward.is-party .z-reward-text { color: #5FA524; }

.z-confetti { position: absolute; inset: 0; pointer-events: none; }
.z-confetti span { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; animation: zfall 2.4s linear infinite; }
.z-confetti span:nth-child(1) { left: 12%; background: #FF8A3D; animation-duration: 2.2s; }
.z-confetti span:nth-child(2) { left: 34%; background: #17BEBB; animation-duration: 2.6s; animation-delay: .4s; }
.z-confetti span:nth-child(3) { left: 58%; background: #8BC53F; animation-delay: .9s; }
.z-confetti span:nth-child(4) { left: 80%; background: #FFC531; animation-duration: 2.8s; animation-delay: .2s; }
.z-confetti span:nth-child(5) { left: 22%; background: #6C7BFF; animation-duration: 3s; animation-delay: 1.3s; }
.z-confetti span:nth-child(6) { left: 68%; background: #A78BFA; animation-duration: 2.5s; animation-delay: 1.7s; }

/* ---------- Toast ---------- */
.z-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 100; background: var(--ink-2); color: #FFF6E9;
  font-size: 15px; font-weight: 800; padding: 12px 22px; border-radius: 20px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .15);
  animation: zin .2s ease-out; max-width: calc(100vw - 32px);
}
.z-toast.is-error { background: var(--coral); }

/* ---------- Connexion ---------- */
.z-login {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(900px 600px at 20% 0%, #FFF9EC 0%, #FFF6E9 40%, #F2FBFF 100%);
}
.z-login-card {
  width: 100%; max-width: 380px; background: #fff;
  border: 4px solid var(--sun-soft); border-radius: 34px; padding: 34px 30px 30px;
  box-shadow: 0 14px 0 rgba(255, 197, 49, .22), 0 26px 40px rgba(120, 90, 40, .12);
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.z-login-hint { margin: 4px 0 6px; font-size: 16px; font-weight: 700; color: var(--muted); }
.z-login-input {
  border: 3px solid var(--sun-soft); border-radius: 22px; padding: 12px 18px;
  font-size: 17px; font-weight: 700; color: var(--ink-2); outline: none;
}
.z-login-input:focus { border-color: var(--sun); }
.z-login-error { margin: 0; font-size: 14px; font-weight: 800; color: var(--coral-dark); }
.z-login-card .z-btn-green { font-size: 17px; padding: 13px 20px; }

/* =====================================================================
   Lot 2 — clarifier l'inbox, vue Domaine, modifier une action
   ===================================================================== */

/* ---------- Fenêtres modales ---------- */
body.is-locked { overflow: hidden; }

@keyframes zfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes zout { to { transform: translateX(-30px) scale(.96); opacity: 0 } }

.z-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(58, 50, 38, .38);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px 16px;
  overflow-y: auto;
  animation: zfade .18s ease-out;
}

.z-close {
  width: 38px; height: 38px; flex: none; cursor: pointer;
  border: 3px solid var(--line); background: #fff; border-radius: 50%;
  font-size: 15px; font-weight: 800; color: var(--muted);
}
.z-close:hover { color: var(--ink-2); border-color: var(--sun-soft); }

.z-btn-orange {
  border: none; cursor: pointer;
  background: linear-gradient(150deg, #FFB160, #FF8A3D);
  color: #fff; font-weight: 800; font-size: 14px;
  padding: 9px 18px; border-radius: 18px;
  box-shadow: 0 4px 0 var(--orange-dark);
  transition: transform .12s, box-shadow .12s;
}
.z-btn-orange:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-dark); }

.z-btn-ghost {
  border: 3px solid var(--line); background: #fff; cursor: pointer;
  color: var(--muted); font-weight: 800; font-size: 14px;
  padding: 9px 18px; border-radius: 18px;
}
.z-btn-ghost:hover { color: var(--ink-2); border-color: var(--sun-soft); }

.z-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.z-panel-head .z-panel-title { margin-bottom: 0; }

/* ---------- Champs de formulaire ---------- */
.z-input, .z-select {
  width: 100%; border: 3px solid var(--sun-soft); border-radius: 16px;
  padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--ink-2);
  background: #fff; outline: none;
}
.z-input:focus, .z-select:focus { border-color: var(--sun); }
.z-textarea { resize: vertical; min-height: 64px; font-weight: 600; }
.z-select { cursor: pointer; }
.z-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.z-field > span { font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .3px; }
.z-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.z-field-row .z-field { flex: 1 1 180px; }
.z-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.z-check input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.z-optional { font-weight: 700; color: var(--muted-2); letter-spacing: 0; }

/* ---------- Chips : contextes et dates ---------- */
.z-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.z-chip {
  border: 3px solid var(--line); background: #fff; cursor: pointer;
  border-radius: 16px; padding: 7px 14px;
  font-size: 14px; font-weight: 800; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .12s;
}
.z-chip:hover { transform: translateY(-2px); color: var(--ink-soft); }
.z-chip.is-on { background: #FFF0D4; border-color: var(--sun); color: var(--ink-2); }
.z-chip--date input { border: none; outline: none; background: transparent; font: 700 13px var(--font); color: var(--ink-soft); width: 120px; }

/* ---------- Clarifier l'inbox ---------- */
.z-clarify {
  width: min(760px, 100%); background: #fff;
  border: 4px solid var(--sun-soft); border-radius: 34px;
  padding: 22px 26px 26px;
  box-shadow: 0 14px 0 rgba(255, 197, 49, .22), 0 26px 40px rgba(120, 90, 40, .18);
  animation: zin .25s cubic-bezier(.4, 1.4, .5, 1);
}
.z-clarify-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.z-clarify-heading { font-size: 15px; color: var(--muted); letter-spacing: .8px; }
.z-clarify-progress { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--orange); }
.z-progress { height: 12px; border-radius: 8px; background: #FFF0D4; overflow: hidden; margin-bottom: 18px; }
.z-progress-fill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #FFC531, #8BC53F); transition: width .35s; }

.z-clarify-card {
  background: #FFFCF5; border: 3px dashed #EFE2CC; border-radius: 24px;
  padding: 18px 22px; margin-bottom: 18px;
}
.z-clarify-card.is-entering { animation: zin .3s cubic-bezier(.4, 1.4, .5, 1); }
.z-clarify-card.is-leaving { animation: zout .22s ease-in forwards; }
.z-clarify-source { font-size: 12.5px; font-weight: 800; color: var(--muted-2); margin-bottom: 6px; }
.z-clarify-title { font-size: 26px; line-height: 1.2; color: var(--ink); letter-spacing: -.4px; overflow-wrap: anywhere; }
.z-clarify-notes { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); white-space: pre-wrap; }

.z-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.z-choice {
  cursor: pointer; border: 3px solid var(--line); background: #fff; border-radius: 22px;
  padding: 16px 12px; font-size: 14.5px; font-weight: 800; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 5px 0 rgba(120, 90, 40, .1);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.z-choice:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(120, 90, 40, .12); }
.z-choice:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(120, 90, 40, .12); }
.z-choice-icon { font-size: 26px; line-height: 1; }
.z-choice--action:hover { border-color: var(--green); }
.z-choice--waiting:hover { border-color: var(--sun); }
.z-choice--someday:hover { border-color: #C4B2FF; }
.z-choice--reference:hover { border-color: #8AD8FF; }
.z-choice--trash:hover { border-color: #E3D6C2; }

.z-step { display: flex; flex-direction: column; gap: 18px; animation: zin .2s ease-out; }
.z-step-block { display: flex; flex-direction: column; gap: 10px; }
.z-step-label { font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .4px; }
.z-step-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.z-step-actions .z-btn-green { font-size: 16px; padding: 12px 26px; }

.z-domain-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.z-domain-btn {
  --tile-soft: var(--line);
  cursor: pointer; background: #fff; border: 3px solid var(--tile-soft); border-radius: 18px;
  padding: 10px 6px 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 4px 0 var(--tile-shadow, rgba(120, 90, 40, .1));
  transition: transform .12s;
}
.z-domain-btn:hover { transform: translateY(-2px); }
.z-domain-btn.is-on { border-color: var(--tile-color); background: var(--tile-soft); }
.z-domain-btn-art { width: 34px; height: 34px; }
.z-domain-btn-name { font-size: 11.5px; font-weight: 800; color: var(--ink-2); line-height: 1.2; }

.z-clarify-done { text-align: center; padding: 30px 10px 14px; animation: zin .3s ease-out; }
.z-clarify-done-icon { font-size: 60px; animation: zpop .5s ease-out; }
.z-clarify-done-text { font-size: 24px; font-weight: 800; color: var(--ink-2); margin: 10px 0 20px; }

/* ---------- Vue Domaine ---------- */
.z-domain {
  --tile-color: var(--orange);
  --tile-soft: var(--sun-soft);
  width: min(840px, 100%); background: #fff;
  border: 4px solid var(--tile-soft); border-radius: 34px;
  padding: 22px 26px 26px;
  box-shadow: 0 14px 0 rgba(120, 90, 40, .12), 0 26px 40px rgba(120, 90, 40, .18);
  animation: zin .25s cubic-bezier(.4, 1.4, .5, 1);
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
.z-domain-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.z-domain-art { width: 46px; height: 46px; flex: none; display: block; }
.z-domain-head-art { width: 46px; height: 46px; }
.z-domain-name { font-size: 24px; color: var(--tile-color); letter-spacing: -.3px; margin-right: auto; }
.z-domain-filter { margin-bottom: 14px; }
.z-domain-body { overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding-right: 4px; }

.z-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.z-section-label { font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .6px; }
.z-section-head.is-late .z-section-label { color: var(--coral); }
.z-section-head.is-today .z-section-label { color: var(--orange); }
.z-section-count {
  font-size: 12px; font-weight: 800; color: var(--muted);
  background: #FFF0D4; border-radius: 10px; padding: 1px 8px;
}
.z-section-head.is-late .z-section-count { background: #FFE3E6; color: var(--coral-dark); }

.z-items { display: flex; flex-direction: column; gap: 8px; }
.z-item {
  display: flex; align-items: center; gap: 10px;
  background: #FFFCF5; border: 2px solid var(--line); border-radius: 18px;
  padding: 10px 14px;
}
.z-item.is-late { border-color: #FFC9CF; background: #FFF7F7; }
.z-item.is-priority { box-shadow: inset 4px 0 0 var(--sun); }
.z-item-main {
  flex: 1; min-width: 0; text-align: left; background: none; border: none;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 0; font: inherit;
}
.z-item-title { font-size: 15px; font-weight: 800; color: var(--ink-2); overflow-wrap: anywhere; }
.z-item-meta { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.z-item-outcome { font-size: 12.5px; font-weight: 700; color: var(--muted-2); font-style: italic; }
.z-item-icon { font-size: 18px; flex: none; }
.z-item-done, .z-item-edit {
  flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line); background: #fff;
  font-size: 15px; font-weight: 800; color: var(--muted-2);
  transition: transform .12s;
}
.z-item-done:hover { background: var(--green); border-color: var(--green-dark); color: #fff; transform: scale(1.08); }
.z-item-edit:hover { border-color: var(--sun); color: var(--ink-soft); }
.z-item--project.is-stuck { border-color: #FFD1AC; background: #FFF8F0; }
.z-item.is-done { opacity: .6; }
.z-item-check { color: var(--green-dark); font-weight: 800; }

.z-empty { text-align: center; padding: 24px 10px; color: var(--muted); font-weight: 700; }
.z-empty-icon { font-size: 40px; margin-bottom: 8px; }
.z-done-list summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .4px; margin-bottom: 8px; }

/* ---------- Modifier une action ---------- */
.z-edit {
  width: min(620px, 100%); background: #fff;
  border: 4px solid var(--sun-soft); border-radius: 34px;
  padding: 22px 26px 26px;
  box-shadow: 0 14px 0 rgba(255, 197, 49, .22), 0 26px 40px rgba(120, 90, 40, .18);
  display: flex; flex-direction: column; gap: 14px;
  animation: zin .25s cubic-bezier(.4, 1.4, .5, 1);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.z-edit-head { display: flex; align-items: center; gap: 14px; }
.z-edit-heading { font-size: 15px; color: var(--muted); letter-spacing: .8px; margin-right: auto; }
.z-edit-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; }

.z-card-edit {
  position: absolute; left: 22px; bottom: 18px;
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 800; color: var(--muted-2); padding: 6px 10px; border-radius: 12px;
}
.z-card-edit:hover { color: var(--ink-soft); background: #FFF6E4; }

/* =====================================================================
   Lot 3 — référentiel et recherche globale
   ===================================================================== */

.z-spacer { flex: 1; }
.z-btn-mini { padding: 5px 12px; font-size: 12.5px; border-width: 2px; }
.z-btn-danger {
  border: 3px solid #FFC9CF; background: #fff; cursor: pointer;
  color: var(--coral-dark); font-weight: 800; font-size: 14px;
  padding: 9px 18px; border-radius: 18px;
}
.z-btn-danger:hover { background: #FFF1F2; }

/* ---------- Recherche globale ---------- */
.z-search-group + .z-search-group { margin-top: 14px; }
.z-search-group-title { font-size: 11.5px; font-weight: 800; color: var(--muted-2); letter-spacing: .6px; margin-bottom: 4px; }
.z-row--clickable { width: 100%; background: none; border: none; font: inherit; cursor: pointer; }
.z-row--clickable:hover { background: #FFFCF5; border-radius: 12px; }

/* ---------- Tiroir « Références » de la carte ---------- */
.z-ref-open {
  border: none; background: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--ink-soft); text-align: left; flex: 1; min-width: 0;
}
.z-ref-open:hover { color: var(--orange); text-decoration: underline; }
.z-ref-unlink {
  margin-left: auto; width: 24px; height: 24px; flex: none; cursor: pointer;
  border: 2px solid transparent; background: none; border-radius: 50%;
  font-size: 12px; font-weight: 800; color: var(--muted-2);
}
.z-ref-unlink:hover { border-color: #FFC9CF; color: var(--coral); }
.z-ref--empty { color: var(--muted-2); }
.z-ref-add {
  margin-top: 8px; width: 100%; cursor: pointer;
  border: 2px dashed #EFE2CC; background: #fff; border-radius: 14px;
  padding: 8px; font-size: 13.5px; font-weight: 800; color: var(--muted);
}
.z-ref-add:hover { border-color: var(--sun); color: var(--ink-soft); }

.z-ref-picker {
  margin-top: 10px; background: #fff; border: 3px solid var(--blue-soft);
  border-radius: 18px; padding: 10px; animation: zin .18s ease-out;
}
.z-ref-picker-results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.z-picker-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left;
  padding: 8px 10px; border-radius: 12px; font: inherit;
}
.z-picker-row:hover { background: #F2FBFF; }
.z-picker-row .z-item-meta { margin-left: auto; }
.z-picker-new { color: var(--blue); font-weight: 800; }

/* ---------- Fiche du référentiel ---------- */
.z-ref-card {
  --tile-soft: var(--blue-soft);
  width: min(760px, 100%); background: #fff;
  border: 4px solid var(--tile-soft); border-radius: 34px;
  padding: 22px 26px 26px;
  box-shadow: 0 14px 0 rgba(44, 159, 214, .16), 0 26px 40px rgba(120, 90, 40, .18);
  animation: zin .25s cubic-bezier(.4, 1.4, .5, 1);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.z-ref-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.z-ref-heading { font-size: 15px; color: var(--muted); letter-spacing: .8px; margin-right: auto; }
.z-ref-title { font-size: 26px; line-height: 1.2; color: var(--ink); letter-spacing: -.4px; overflow-wrap: anywhere; }
.z-ref-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.z-ref-url { font-weight: 800; }
.z-ref-tags { margin-top: 12px; }
.z-chip--tag { cursor: default; background: #F2FBFF; border-color: var(--blue-soft); color: var(--blue); }
.z-chip--tag:hover { transform: none; }
.z-ref-body {
  margin-top: 16px; padding: 16px 18px;
  background: #FFFCF5; border-radius: 20px;
  font-size: 15.5px; line-height: 1.55; color: var(--ink-soft);
}
.z-ref-empty { color: var(--muted-2); font-weight: 700; margin: 0; }
.z-ref-links { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.z-ref-form { display: flex; flex-direction: column; gap: 14px; }
.z-ref-textarea { min-height: 220px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
.z-ref-actions { display: flex; align-items: center; gap: 12px; }

/* Markdown léger */
.z-md-h1, .z-md-h2, .z-md-h3, .z-md-h4 { font-weight: 800; color: var(--ink-2); margin: 14px 0 6px; }
.z-md-h1 { font-size: 21px; }
.z-md-h2 { font-size: 18px; }
.z-md-h3, .z-md-h4 { font-size: 16px; }
.z-md-p { margin: 0 0 8px; }
.z-md-list { margin: 0 0 10px; padding-left: 22px; }
.z-md-list li { margin-bottom: 4px; }
.z-md-quote {
  margin: 8px 0; padding: 6px 14px; border-left: 4px solid var(--sun-soft);
  color: var(--muted); font-style: italic;
}
.z-ref-body code {
  background: #FFF0D4; border-radius: 6px; padding: 1px 6px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px;
}

/* =====================================================================
   Lot 6 — suggestions de l'agent de revue
   ===================================================================== */

.z-suggest-btn { position: relative; border-color: #E4F3CB; }
.z-suggest-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--green); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 2px 0 var(--green-dark);
}
.z-panel--green { border: 3px solid #E4F3CB; box-shadow: 0 8px 22px rgba(139, 197, 63, .16); }
.z-panel-sub { font-size: 12.5px; font-weight: 700; color: var(--muted-2); }

.z-suggest {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-top: 2px dashed var(--line);
}
.z-suggest:first-child { border-top: none; }
.z-suggest.is-summary { background: #FFFCF5; border-radius: 18px; padding: 14px 16px; border-top: none; margin-bottom: 6px; }
.z-suggest-icon { font-size: 20px; line-height: 1.3; }
.z-suggest-main { flex: 1; min-width: 0; }
.z-suggest-title { font-size: 15.5px; font-weight: 800; color: var(--ink-2); }
.z-suggest-detail { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 3px; white-space: pre-wrap; }
.z-suggest-link {
  margin-top: 6px; border: none; background: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 13.5px; font-weight: 800; color: var(--orange);
}
.z-suggest-link:hover { text-decoration: underline; }
.z-suggest-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.z-suggest-what { font-size: 12px; font-weight: 800; color: var(--muted-2); }

/* =====================================================================
   Lot 5 — écran Réglages
   ===================================================================== */

.z-icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--line); background: #fff; color: var(--muted-2);
  font-size: 16px; font-weight: 800;
}
.z-icon-btn:hover { color: var(--ink-soft); border-color: var(--sun-soft); }
.z-icon-btn--mini { width: 28px; height: 28px; border-width: 2px; font-size: 13px; }
.z-icon-btn--mini:disabled { opacity: .35; cursor: default; }

.z-settings {
  width: min(900px, 100%); background: #fff;
  border: 4px solid var(--sun-soft); border-radius: 34px;
  padding: 22px 26px 26px;
  box-shadow: 0 14px 0 rgba(255, 197, 49, .22), 0 26px 40px rgba(120, 90, 40, .18);
  animation: zin .25s cubic-bezier(.4, 1.4, .5, 1);
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
.z-settings-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.z-settings-heading { font-size: 15px; color: var(--muted); letter-spacing: .8px; margin-right: auto; }
.z-settings-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.z-settings-body { overflow-y: auto; padding-right: 4px; }
.z-settings-section { display: flex; flex-direction: column; gap: 14px; animation: zin .18s ease-out; }
.z-settings-title { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .5px; }
.z-settings-form { display: flex; flex-direction: column; gap: 12px; }
.z-settings-section .z-btn-green, .z-settings-section .z-btn-ghost, .z-settings-section .z-btn-orange { align-self: flex-start; }
.z-hint { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.z-hint code { background: #FFF0D4; border-radius: 6px; padding: 1px 6px; font-size: 12.5px; }
.z-sep { border: none; border-top: 2px dashed var(--line); margin: 6px 0; }

.z-set-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #FFFCF5; border: 2px solid var(--line); border-radius: 16px;
  padding: 8px 12px; margin-bottom: 8px;
}
.z-set-row.is-off { opacity: .55; }
.z-set-swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.z-input--mini { flex: 1 1 160px; padding: 6px 10px; font-size: 14px; border-width: 2px; border-radius: 12px; }
.z-input--tiny { width: 62px; padding: 6px 8px; font-size: 14px; border-width: 2px; border-radius: 12px; }
.z-select--mini { width: auto; padding: 6px 10px; font-size: 13.5px; border-width: 2px; border-radius: 12px; }
.z-color { width: 38px; height: 32px; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 2px; }
.z-set-count { font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.z-set-scopes { font-size: 12.5px; font-weight: 800; color: var(--blue); }
.z-set-lead { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.z-chip--mini { padding: 4px 10px; font-size: 12px; border-width: 2px; }
.z-btn-mini { padding: 5px 12px; font-size: 12.5px; border-width: 2px; }

.z-token-new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.z-token-new .z-input { flex: 0 1 200px; }
.z-token-result {
  background: #FFF6E4; border: 3px solid var(--sun); border-radius: 18px;
  padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  animation: zin .2s ease-out;
}
.z-token-warning { flex: 1 1 100%; font-size: 13px; font-weight: 800; color: var(--orange-dark); }
.z-token-value {
  flex: 1 1 320px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13.5px; background: #fff; border-radius: 10px; padding: 8px 10px;
  word-break: break-all; user-select: all;
}

.z-counts { display: flex; flex-wrap: wrap; gap: 12px; }
.z-count {
  flex: 1 1 110px; background: #FFFCF5; border: 2px solid var(--line);
  border-radius: 18px; padding: 12px; text-align: center;
}
.z-count-n { font-size: 24px; font-weight: 800; color: var(--ink-2); }
.z-count-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.z-export-row { display: flex; flex-wrap: wrap; gap: 10px; }
.z-export-row .z-btn-ghost { align-self: auto; }

/* =====================================================================
   Lot 4 — trois mises en page distinctes
   Desktop ≥ 1200 px : la carte du village (tuiles autour de la carte)
   Tablette 768–1199 : tuiles 4×2 au-dessus, carte dessous, semaine en bas
   Mobile < 768 px   : onglets bas, un écran à la fois
   ===================================================================== */

/* ---------- Barre d'onglets : masquée hors mobile ---------- */
.z-tabs { display: none; }

/* =====================================================================
   Lot 7 — Outlook : rendez-vous sur la frise, liens de la carte
   ===================================================================== */

/* Un rendez-vous n'est pas une action : pas de pastille, un bandeau discret */
.z-event {
  display: flex; align-items: baseline; gap: 6px;
  background: #F2F6FA; border-left: 3px solid var(--neutral-badge);
  border-radius: 8px; padding: 4px 8px; text-decoration: none;
  animation: zpop .3s ease-out both;
}
a.z-event:hover { background: #E8F1F8; }
.z-event-time { font-size: 10.5px; font-weight: 800; color: var(--neutral-badge); flex: none; }
.z-event-title {
  font-size: 11px; font-weight: 700; color: var(--ink-soft); min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.z-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 18px; }
.z-card-link {
  font-size: 13px; font-weight: 800; color: var(--blue);
  background: #F2FBFF; border: 2px solid var(--blue-soft); border-radius: 14px; padding: 5px 12px;
}
.z-card-link:hover { background: #E4F5FF; color: var(--blue); }

/* ---------- Page de consentement OAuth (« Autoriser Claude ? ») ---------- */
.z-consent { max-width: 460px; text-align: left; }
.z-consent .z-brand { margin-bottom: 4px; }
.z-consent-icon { font-size: 44px; text-align: center; }
.z-consent-title { margin: 4px 0 0; font-size: 22px; font-weight: 800; color: var(--ink-2); text-align: center; }
.z-consent-title span { color: var(--orange); }
.z-consent-text { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--muted); text-align: center; }
.z-consent-text strong { color: var(--ink-soft); }
.z-consent-warning {
  margin: 0; padding: 10px 14px; border-radius: 14px;
  background: #FFF6E4; border: 2px solid var(--sun-soft);
  font-size: 13px; font-weight: 700; color: var(--orange-dark);
}
.z-consent-form { display: flex; flex-direction: column; gap: 12px; }
.z-consent-scopes { display: flex; flex-direction: column; gap: 8px; }
.z-consent-scope {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: #FFFCF5; border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px;
}
.z-consent-scope input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.z-consent-scope span { display: flex; flex-direction: column; gap: 2px; }
.z-consent-scope strong { font-size: 14.5px; color: var(--ink-2); }
.z-consent-scope small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.z-consent-actions { display: flex; justify-content: flex-end; gap: 10px; }
.z-consent-actions .z-btn-green { font-size: 16px; padding: 11px 24px; }
.z-consent-btn { align-self: center; text-align: center; }
.z-consent-foot { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted-2); text-align: center; }

/* ---------- Desktop ≥ 1200 px ---------- */
@media (min-width: 1200px) {
  .z-village { flex-wrap: nowrap; }
  .z-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 0; }
  .z-moment { flex: 2.4 1 0; }
  .z-bottom { flex-wrap: nowrap; }
}

/* ---------- Tablette 768–1199 px ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .z-page { padding: 18px 20px 28px; }
  .z-village { flex-wrap: wrap; gap: 18px; }
  /* Les huit bâtiments forment une grille 4×2 au-dessus de la carte */
  .z-tiles { flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .z-tiles--left { order: 1; }
  .z-tiles--right { order: 2; }
  .z-moment { order: 3; flex: 1 1 100%; }
  .z-tile { padding: 12px 8px 10px; }
  .z-tile-art, .z-tile-emoji { width: 46px; height: 46px; line-height: 46px; }
  .z-tile-name { font-size: 13px; }
  .z-card { padding: 24px 26px 22px; }
  .z-card-title { font-size: 32px; }
  .z-bottom { flex-wrap: wrap; }
  .z-week { flex: 1 1 100%; }
  .z-reward { flex: 1 1 100%; }
  .z-week-path { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}

/* ---------- Mobile < 768 px ---------- */
@media (max-width: 767px) {
  .z-page {
    padding: 12px 14px calc(78px + env(safe-area-inset-bottom));
    min-height: 100vh;
  }

  /* Barre d'onglets fixée en bas, au pouce */
  .z-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; justify-content: space-around; align-items: stretch;
    background: #fff; border-top: 3px solid var(--sun-soft);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(120, 90, 40, .12);
  }
  .z-tab {
    flex: 1; min-width: 0; position: relative; cursor: pointer;
    border: none; background: none; border-radius: 14px;
    padding: 6px 1px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10.5px; font-weight: 800; color: var(--muted-2);
    min-height: 52px;
  }
  .z-tab .z-tab-label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .z-tab-icon { font-size: 20px; line-height: 1; }
  .z-tab.is-on { color: var(--orange); background: #FFF6E4; }
  .z-tab-badge {
    position: absolute; top: 2px; right: 22%;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--blue); color: #fff; font-size: 11px; font-weight: 800;
    display: grid; place-items: center;
  }
  .z-tab-badge.is-full { background: var(--orange); }   /* jamais rouge */
  .z-tab-badge--shop { background: var(--green); }

  /* En-tête compact : le nom cède la place */
  .z-top { gap: 10px; margin-bottom: 14px; }
  .z-brand-name { display: none; }
  .z-logo { width: 38px; height: 38px; border-radius: 13px; font-size: 20px; }
  .z-kbd { display: none; }

  /* Un onglet = un écran. Tout est masqué, chaque onglet rallume sa part. */
  .z-capture, .z-search, .z-mailbox, .z-logout, .z-icon-btn,
  .z-village, .z-bottom, .z-panel { display: none; }

  /* Réglages et déconnexion vivent dans l'onglet Capture */
  body[data-tab="capture"] #settings-btn { display: block; }
  .z-settings { width: 100%; max-height: 100vh; border-radius: 0; border-width: 0; padding: 16px; box-shadow: none; }
  .z-set-row { gap: 6px; }

  /* Capture : le champ prend toute la largeur, prêt à la saisie */
  body[data-tab="capture"] .z-capture { display: block; flex: 1 1 100%; }
  body[data-tab="capture"] .z-logout { display: block; }
  body[data-tab="capture"] .z-capture-box { padding: 12px 12px 12px 18px; border-radius: 24px; }
  body[data-tab="capture"] #capture-input { font-size: 17px; }
  body[data-tab="capture"] .z-btn-capture { padding: 12px 18px; }
  body[data-tab="capture"] .z-capture-hint { display: block; }

  /* Moment : le brief en tête, puis la carte, la semaine et la récompense.
     C'est l'écran du matin : on veut la photo de la journée avant d'agir. */
  body[data-tab="moment"] #brief-btn { display: block; }
  body[data-tab="moment"] #brief-panel:not([hidden]) { display: block; }
  body[data-tab="moment"] .z-village { display: block; }
  body[data-tab="moment"] .z-tiles { display: none; }
  body[data-tab="moment"] .z-bottom { display: flex; flex-direction: column; margin-top: 20px; }

  /* Domaines : les huit tuiles en deux colonnes */
  body[data-tab="domaines"] .z-village { display: block; }
  body[data-tab="domaines"] .z-moment { display: none; }
  body[data-tab="domaines"] .z-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-tab="domaines"] .z-tiles--right { margin-top: 14px; }

  /* Inbox, achats et recherche : le panneau devient l'écran */
  body[data-tab="inbox"] #inbox-panel { display: block; }
  body[data-tab="shopping"] #shop-panel { display: block; }
  body[data-tab="search"] .z-search { display: flex; max-width: none; flex: 1 1 100%; }
  body[data-tab="search"] #search-panel { display: block; }

  /* Carte du moment : plus compacte, boutons plus gros sous le pouce */
  .z-card { padding: 22px 20px 20px; border-radius: 28px; }
  .z-card-title { font-size: 26px; letter-spacing: -.3px; }
  .z-card-context { font-size: 15px; margin-bottom: 18px; }
  .z-card-meta { flex-wrap: wrap; gap: 8px; }
  .z-card-actions { gap: 26px; margin-top: 22px; }
  .z-round--done { width: 96px; height: 96px; }
  .z-round--defer { width: 84px; height: 84px; }
  .z-skip { position: static; display: block; margin: 14px auto 0; }
  .z-card-edit { position: static; display: block; margin: 6px auto 0; }
  .z-moment-head { padding: 0 2px; }

  /* Semaine : une colonne par jour qui défile, plutôt qu'une grille serrée */
  .z-week, .z-reward { padding: 16px 16px 18px; border-radius: 24px; }
  .z-week-path { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .z-day { min-height: auto; }

  /* Fenêtres modales : plein écran, plus de marges perdues */
  .z-overlay { padding: 0; align-items: stretch; }
  .z-clarify, .z-domain, .z-edit, .z-ref-card {
    width: 100%; max-height: 100vh; border-radius: 0; border-width: 0;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto; box-shadow: none;
  }
  .z-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-choice { padding: 14px 8px; font-size: 13.5px; }
  .z-domain-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .z-clarify-title { font-size: 22px; }
  .z-field-row { gap: 10px; }
  .z-field-row .z-field { flex: 1 1 100%; }
  /* Les boutons restent à la fin du parcours, sans recouvrir les choix d'échéance */
  .z-step-actions { padding-top: 6px; }
  .z-step { padding-bottom: 8px; }

  /* Toast au-dessus de la barre d'onglets */
  .z-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* Petits écrans : deux colonnes de tuiles restent lisibles jusqu'à 340 px */
@media (max-width: 360px) {
  .z-tab-label { font-size: 10px; }
  .z-tile-name { font-size: 12.5px; }
  .z-card-title { font-size: 23px; }
}

/* =====================================================================
   Lot 8 — le brief du matin et du soir
   Ton chaud et calme : c'est un point de situation, pas une alarme.
   Aucune section n'est rouge : le rouge reste aux échéances dépassées.
   ===================================================================== */

.z-panel--brief { border: 3px solid var(--sun-pale); box-shadow: 0 8px 22px rgba(255, 197, 49, .18); }
.z-brief-btn { font-size: 18px; }
.z-panel--brief .z-panel-head { gap: 10px; }
.z-panel--brief .z-panel-sub { margin-right: auto; }

.z-brief-section { margin-top: 14px; }
.z-brief-section:first-child { margin-top: 2px; }
.z-brief-section-title {
  font-size: 11.5px; font-weight: 800; color: var(--muted-2);
  letter-spacing: .7px; margin-bottom: 4px;
}
.z-brief-lines { display: flex; flex-direction: column; }

.z-brief-line {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 4px; border: none; border-top: 2px dashed var(--line);
  background: none; font: inherit; cursor: pointer; border-radius: 10px;
}
.z-brief-line:first-child { border-top: none; }
.z-brief-line:hover { background: #FFFBF2; }
.z-brief-line--event { cursor: default; }
.z-brief-line--event:hover { background: none; }

.z-brief-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--dot, var(--sun)); }
.z-brief-dot--none { background: var(--line); }
.z-brief-hour {
  font-size: 13px; font-weight: 800; color: var(--blue);
  min-width: 52px; flex: none;
}
.z-brief-line-title {
  font-size: 15.5px; font-weight: 700; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.z-brief-line-meta {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  margin-left: auto; white-space: nowrap; flex: none;
}

.z-brief-calm { padding: 10px 2px 4px; }
.z-brief-calm-title { font-size: 17px; font-weight: 800; color: var(--ink-2); }
.z-brief-calm-sub { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 4px; }

@media (max-width: 720px) {
  .z-panel--brief { border-radius: 20px; padding: 14px 16px; }
  .z-panel--brief .z-panel-head { flex-wrap: wrap; gap: 6px; }
  .z-brief-line { flex-wrap: wrap; padding: 11px 2px; }
  .z-brief-line-title { white-space: normal; flex: 1 1 100%; }
  .z-brief-line-meta { margin-left: 20px; }
}

/* =====================================================================
   Fusionner deux captures qui parlent de la même tâche
   Les cases restent discrètes : l'inbox se lit d'abord, se trie ensuite.
   ===================================================================== */

.z-row-check {
  width: 17px; height: 17px; flex: none; margin: 0; cursor: pointer;
  accent-color: var(--orange); opacity: .35; transition: opacity .15s;
}
.z-row:hover .z-row-check, .z-row-check:checked, .z-row-check:focus-visible { opacity: 1; }
.z-row.is-picked { background: #FFF6E4; border-radius: 10px; }

.z-merge {
  background: #FFFBF2; border: 2px dashed var(--sun-soft);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 12px;
  animation: zin .2s ease-out;
}
.z-merge-title { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .4px; margin-bottom: 8px; }
.z-merge-choice {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 0;
  font-size: 15px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.z-merge-radio { margin-top: 3px; flex: none; accent-color: var(--orange); cursor: pointer; }
.z-merge .z-field { margin-top: 8px; }
.z-merge-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.z-merge .z-hint { margin-top: 8px; }

@media (max-width: 720px) {
  .z-row-check { opacity: 1; width: 20px; height: 20px; }
}

/* =====================================================================
   Palette d'illustrations des domaines
   On choisit une image en la voyant : plus aucun nom anglais à l'écran.
   ===================================================================== */

.z-icon-pick {
  width: 40px; height: 40px; flex: none; padding: 4px;
  border: 2px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; display: grid; place-items: center; transition: border-color .15s, transform .1s;
}
.z-icon-pick:hover { border-color: var(--sun-soft); transform: translateY(-1px); }
.z-icon-pick-art { width: 28px; height: 28px; display: block; }
.z-icon-pick .z-tile-emoji { font-size: 22px; line-height: 1; }

.z-palette {
  background: #FFFBF2; border: 2px dashed var(--sun-soft);
  border-radius: 18px; padding: 12px 14px; margin: 4px 0 10px;
  animation: zin .2s ease-out;
}
.z-palette-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.z-palette-title { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .3px; }

.z-palette-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
}
.z-palette-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px; border: 2px solid transparent; border-radius: 14px;
  background: #fff; cursor: pointer; font: inherit;
  transition: border-color .15s, transform .1s;
}
.z-palette-cell:hover { border-color: var(--sun-soft); transform: translateY(-2px); }
.z-palette-cell.is-on { border-color: var(--orange); background: var(--sun-pale); }
.z-palette-art { width: 34px; height: 34px; display: block; }
.z-palette-cell .z-tile-emoji { font-size: 28px; line-height: 1; }
.z-palette-name {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-align: center; line-height: 1.15;
}
.z-palette-cell.is-on .z-palette-name { color: var(--orange-dark); }

@media (max-width: 720px) {
  .z-palette-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .z-palette-art { width: 30px; height: 30px; }
}

/* =====================================================================
   La corbeille : 24 heures pour revenir sur un geste
   Ton neutre et discret — ce n'est pas une alerte, c'est un filet.
   ===================================================================== */

.z-trash {
  background: #F7F9FB; border: 2px dashed #DCE5EE;
  border-radius: 18px; padding: 12px 16px; margin-bottom: 12px;
  animation: zin .2s ease-out;
}
.z-trash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.z-trash-title { font-size: 12px; font-weight: 800; color: var(--neutral-badge); letter-spacing: .5px; }
.z-trash .z-row { border-top-color: #E6EDF4; }
.z-trash .z-row:first-child { border-top: none; }
.z-trash .z-row-title { color: var(--ink-soft); }
.z-trash .z-row-sub { color: var(--muted-2); }
.z-row-dot--off { background: var(--neutral-badge); opacity: .4; }
.z-trash .z-hint { margin-top: 8px; }

@media (max-width: 720px) {
  .z-trash .z-row { flex-wrap: wrap; }
  .z-trash .z-row-sub { margin-left: 22px; }
  .z-trash .z-btn-mini { margin-left: 22px; }
}

/* =====================================================================
   La liste d'achat
   Un pense-bête, pas une alerte : vert tendre, aucune pastille rouge.
   ===================================================================== */

.z-choice--shopping:hover { border-color: #C6E59A; }

.z-shop-btn { position: relative; font-size: 17px; }
.z-shop-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--green); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 2px 0 var(--green-dark);
}

.z-panel--shop { border: 3px solid #E4F3CB; box-shadow: 0 8px 22px rgba(139, 197, 63, .16); }

.z-shop-add { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.z-shop-add .z-input { flex: 1; }

.z-shop-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 6px; border-top: 2px dashed var(--line);
  cursor: pointer; border-radius: 10px;
}
.z-shop-row:first-child { border-top: none; }
.z-shop-row:hover { background: #FBFDF6; }
.z-shop-check {
  width: 22px; height: 22px; flex: none; margin: 0;
  accent-color: var(--green); cursor: pointer;
}
.z-shop-label { font-size: 16.5px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.z-shop-note {
  font-size: 13px; font-weight: 600; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.z-shop-del {
  margin-left: auto; flex: none; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--muted-2); padding: 4px 8px; border-radius: 8px;
  opacity: 0; transition: opacity .15s, color .15s;
}
.z-shop-row:hover .z-shop-del, .z-shop-del:focus-visible { opacity: 1; }
.z-shop-del:hover { color: var(--ink-soft); background: var(--line); }

/* Ce qui vient d'être pris : barré, avec de quoi se raviser */
.z-shop-row.is-bought { cursor: default; opacity: .7; }
.z-shop-row.is-bought:hover { background: none; }
.z-shop-row.is-bought .z-shop-label { text-decoration: line-through; color: var(--muted); font-weight: 600; }
.z-shop-row.is-bought .z-btn-mini { margin-left: auto; }
.z-shop-tick { color: var(--green-dark); font-weight: 800; width: 22px; text-align: center; flex: none; }

.z-shop-done { margin-top: 12px; border-top: 2px dashed var(--line); padding-top: 8px; }
.z-shop-done-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: none; cursor: pointer; font: inherit; padding: 4px 2px;
  font-size: 12.5px; font-weight: 800; color: var(--muted-2); letter-spacing: .4px;
}
.z-shop-chevron { transition: transform .2s; }
.z-shop-done-head[aria-expanded="true"] .z-shop-chevron { transform: rotate(180deg); }

@media (max-width: 720px) {
  .z-shop-row { padding: 14px 4px; }
  .z-shop-check { width: 26px; height: 26px; }
  .z-shop-label { font-size: 17px; }
  .z-shop-del { opacity: 1; }
  .z-shop-add { flex-wrap: wrap; }
  .z-shop-add .z-input { flex: 1 1 100%; }
  .z-shop-add .z-btn-green { flex: 1 1 100%; }
}