*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 1.0625rem/1.45 var(--corps);
  padding-bottom: calc(var(--bas-barre) + env(safe-area-inset-bottom));
}
body.fige { overflow: hidden; }
body.sans-bas { padding-bottom: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
[hidden] { display: none !important; }
main { padding: 1rem; max-width: 40rem; margin: 0 auto; }

/* ---- barre du haut */
.haut {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .6rem;
  min-height: var(--haut-barre); padding: .5rem 1rem; padding-top: calc(.5rem + env(safe-area-inset-top));
  background: var(--vert-profond); color: #fff;
}
.haut h1 { flex: 1; margin: 0; font: 700 1.25rem/1.2 var(--titre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retour { font-size: 2rem; line-height: 1; text-decoration: none; padding: 0 .5rem .2rem 0; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.pastille { font-size: .875rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; text-decoration: none; background: rgba(255,255,255,.16); white-space: nowrap; }
.pastille.hors { background: var(--ambre-clair); color: var(--ambre); }
.pastille.attente { background: #fff; color: var(--vert-profond); }
.haut .accueil { font-size: .875rem; font-weight: 700; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: .25rem .7rem; min-height: 32px; display: inline-flex; align-items: center; }
.quitter { font-size: .875rem; font-weight: 700; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: .25rem .7rem; min-height: 32px; cursor: pointer; }

/* ---- navigation du bas (onglets fournis par le service) */
.bas {
  position: fixed; inset: auto 0 0 0; z-index: 5; display: flex; background: var(--papier); border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}
.bas a { flex: 1; min-height: var(--bas-barre); display: grid; place-items: center; text-decoration: none; font-weight: 700; color: var(--encre-douce); font-size: .9375rem; text-align: center; padding: 0 .2rem; line-height: 1.2; }
.bas a[aria-current="page"] { color: var(--vert-profond); box-shadow: inset 0 3px 0 var(--jaune); }
.bas.dense a { font-size: .78rem; }

.maj { text-align: center; color: var(--encre-douce); font-size: .8125rem; margin: .5rem 1rem 1rem; }
.sous-titre { margin: 0 0 .75rem; color: var(--encre-douce); }
.indice { color: var(--encre-douce); font-size: .9375rem; }
.vide { text-align: center; padding: 3rem 1rem; color: var(--encre-douce); }
.vide p { margin: .25rem 0; } .vide strong { color: var(--encre); font-family: var(--titre); font-size: 1.25rem; }

/* ---- boutons, champs, messages */
.primaire, .secondaire {
  min-height: 52px; padding: 0 1.25rem; border-radius: 10px; font-weight: 700; cursor: pointer; border: 2px solid var(--action);
}
.primaire { background: var(--action); color: #fff; width: 100%; margin-top: 1rem; }
.primaire:active { background: var(--action-fonce); }
.secondaire { background: var(--papier); color: var(--action); }
.primaire:disabled, .secondaire:disabled { opacity: .5; cursor: default; }
.lien { background: none; border: 0; color: var(--action); text-decoration: underline; font-weight: 400; padding: .5rem; min-height: 44px; cursor: pointer; }
.lien.fort { font-weight: 700; }
.lien-bouton { display: inline-block; margin-top: 1rem; padding: .85rem 1.25rem; border-radius: 10px; background: var(--action); color: #fff; text-decoration: none; font-weight: 700; }
.erreur { color: var(--rouge); font-weight: 700; margin: .5rem 0; }
.alerte { background: var(--ambre-clair); color: var(--ambre); border-left: 5px solid var(--ambre-trait); padding: .6rem .8rem; border-radius: 6px; font-weight: 700; margin: .75rem 0 0; }
input[type=text], input[type=password], input[type=search], input:not([type]), textarea {
  width: 100%; min-height: 52px; padding: .5rem .75rem; border: 2px solid var(--trait); border-radius: 10px; background: #fff; font-size: 1.125rem;
}
input:focus, textarea:focus { border-color: var(--action); outline: none; }
.toast {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--bas-barre) + 1rem + env(safe-area-inset-bottom)); z-index: 40;
  max-width: 36rem; margin: 0 auto; padding: .8rem 1rem; border-radius: 10px; background: var(--encre); color: #fff; font-weight: 700;
}
.toast.ok { background: var(--feuille); }
.toast.erreur { background: var(--rouge); }

/* ---- listes et feuilles (composants communs) */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.calque { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; }
.calque.haut2 { z-index: 30; }
.voile { position: absolute; inset: 0; background: rgba(28,27,29,.5); }
.feuille {
  position: relative; width: 100%; max-width: 40rem; margin: 0 auto; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fond); border-radius: 18px 18px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
.feuille header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.feuille h2 { margin: 0; font: 700 1.25rem/1.2 var(--titre); }
.feuille header p { margin: .15rem 0 0; color: var(--encre-douce); font-size: .9375rem; }
.fermer { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--papier); font-size: 1.5rem; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .feuille { animation: monter .18s ease-out; }
  @keyframes monter { from { transform: translateY(24px); opacity: .6; } }
}
@media (min-width: 640px) { .calque { align-items: center; } .feuille { border-radius: 18px; } }