:root {
  --fond: #F3F5F4;
  --carte: #FFFFFF;
  --encre: #12201C;
  --doux: #56635F;
  --trait: #E1E7E4;
  --trait-fort: #9AA8A3;
  --vert: #0E5A4B;
  --vert-clair: #E1EFEB;
  --vert-moyen: #1A6B5B;
  --orange: #A84300;
  --gris: #E6EAE8;
  --titre: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.4;
}
h1, h2, p { margin: 0; }
a { color: var(--vert); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 3px solid #2F8F7B; outline-offset: 2px; }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 16px 24px; }
.page.centre { justify-content: center; gap: 20px; padding: 32px 24px; }
.attente { padding: 48px 24px; text-align: center; color: var(--doux); }

/* En-têtes */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.entete > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entete h1, .grand-titre { font-family: var(--titre); font-size: 24px; font-weight: 700; line-height: 1.15; }
.entete .nom { font-family: var(--titre); font-size: 19px; font-weight: 700; }
.sous { font-size: 13px; color: var(--doux); }
.retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; align-self: flex-start; font-size: 14px; font-weight: 600; }
.barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h2 { font-family: var(--titre); font-size: 15px; font-weight: 700; }
.titre-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 4px 4px 0; }
.titre-section .sous { font-weight: 600; white-space: nowrap; }
.lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; }

/* Cartes et listes */
.carte { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); color: var(--encre); }
.carte.verte { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--vert); }
.carte.grise { background: var(--gris); border-color: var(--gris); }
.carte.alerte { border: 1.5px solid var(--orange); }
.heros { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: var(--vert); color: #FFFFFF; }
.heros .etiquette { font-size: 13px; color: #D5E8E2; }
.heros .montant { font-family: var(--titre); font-size: 40px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.heros .cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.heros .cases > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--vert-moyen); }
.heros .cases span:first-child { font-size: 12px; color: #D5E8E2; }
.heros .cases span:last-child { font-size: 16px; font-weight: 600; white-space: nowrap; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat { gap: 4px; }
.stat .etiquette { font-size: 12px; color: var(--doux); }
.stat .valeur { font-family: var(--titre); font-size: 20px; font-weight: 700; white-space: nowrap; }
.orange { color: var(--orange); }
.vert { color: var(--vert); }
.fort { font-weight: 600; }
.chiffre { font-family: var(--titre); font-weight: 700; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.liste { display: flex; flex-direction: column; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); overflow: hidden; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 16px; color: var(--encre); border: none; background: none; text-align: left; width: 100%; }
.ligne + .ligne { border-top: 1px solid var(--trait); }
.ligne .gauche { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ligne .droite { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ligne .principal { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .secondaire { font-size: 12px; color: var(--doux); }
.ligne .montant { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ligne.simple { min-height: 48px; }
.ligne.verte { background: var(--vert-clair); color: var(--vert); }
.vide { padding: 24px 16px; text-align: center; font-size: 14px; color: var(--doux); }

.jauge { display: block; height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: 4px; background: var(--vert); }
.jauge.fine { height: 6px; flex: 1; }
.cotisation .nom { width: 96px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; }
.cotisation .etat { width: 104px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cotisation { min-height: 52px; }

.grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.case-appt { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 56px; padding: 6px 12px; border-radius: 12px; }
.case-appt.paye { background: var(--vert); color: #FFFFFF; }
.case-appt.du { background: var(--carte); border: 1.5px solid var(--orange); color: var(--orange); }
.case-appt.du b { color: var(--encre); }
.case-appt b { font-size: 14px; font-weight: 600; }
.case-appt span { font-size: 12px; font-weight: 600; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 14px; background: var(--gris); font-size: 12px; font-weight: 600; }
.badge.vert { background: var(--vert-clair); color: var(--vert); }
.badge.orange { background: #FBEADB; color: var(--orange); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 26px; border: none; background: var(--vert); color: #FFFFFF; font-size: 16px; font-weight: 600; cursor: pointer; }
.bouton:disabled { opacity: 0.6; }
.bouton.secondaire { background: var(--carte); color: var(--encre); border: 1px solid var(--trait-fort); }
.bouton.danger { background: var(--carte); color: var(--orange); border: 1.5px solid var(--orange); }
.bouton.petit { min-height: 44px; padding: 0 14px; border-radius: 22px; font-size: 14px; }
.bouton.rond { width: 44px; min-height: 44px; padding: 0; border-radius: 22px; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.actions.cote { flex-direction: row; }
.actions.cote > * { flex: 1; }

.puces { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puce { min-height: 44px; padding: 0 14px; flex-shrink: 0; border-radius: 22px; border: 1px solid #CBD5D1; background: var(--carte); color: var(--encre); font-size: 13px; font-weight: 500; cursor: pointer; }
.puce.active { border-color: var(--vert); background: var(--vert); color: #FFFFFF; font-weight: 600; }
.numeros { display: flex; gap: 4px; }
.numeros a { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; border: 1px solid #CBD5D1; background: var(--carte); color: var(--encre); font-size: 14px; font-weight: 600; }
.numeros a.active { border-color: var(--vert); background: var(--vert); color: #FFFFFF; }
.numeros.large { flex-wrap: wrap; }
.numeros.large a { flex: 0 0 44px; }

/* Formulaires */
form { display: flex; flex-direction: column; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label, .champ .label { font-size: 13px; font-weight: 600; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--trait-fort); background: var(--carte); font-size: 16px; }
.champ textarea { min-height: 96px; resize: vertical; }
.champ input.gros { font-family: var(--titre); font-size: 18px; font-weight: 600; }
.champ .aide { font-size: 12px; color: var(--doux); }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { position: relative; }
.choix input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; cursor: pointer; }
.choix span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid #CBD5D1; background: var(--carte); font-size: 13px; font-weight: 500; }
.choix input:checked + span { border-color: var(--vert); background: var(--vert); color: #FFFFFF; font-weight: 600; }
.choix input:focus-visible + span { outline: 3px solid #2F8F7B; outline-offset: 2px; }
.choix input:disabled + span { opacity: 0.5; }
.choix.colonne { flex-direction: column; gap: 0; border-radius: 16px; border: 1px solid var(--trait); background: var(--carte); overflow: hidden; }
.choix.colonne label + label { border-top: 1px solid var(--trait); }
.choix.colonne span { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: none; border-radius: 0; font-size: 14px; }
.choix.colonne input:checked + span { background: var(--vert-clair); color: var(--vert); }
.photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 110px; padding: 12px; border-radius: 16px; border: 1.5px dashed var(--trait-fort); background: var(--carte); color: var(--doux); font-size: 13px; font-weight: 500; text-align: center; }
.photo img { max-width: 100%; max-height: 320px; border-radius: 10px; }
.resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resume .gauche { display: flex; flex-direction: column; gap: 2px; }
.code-activation { font-family: var(--titre); font-size: 40px; font-weight: 700; letter-spacing: 0.12em; text-align: center; }
.note { font-size: 12px; color: var(--doux); }
.centre-texte { text-align: center; }
.logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--vert); color: #FFFFFF; }
ul.points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--doux); }

/* Barre du bas */
.nav { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 64px; padding-bottom: env(safe-area-inset-bottom); background: var(--carte); border-top: 1px solid var(--trait); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; font-size: 11px; font-weight: 600; color: var(--doux); }
.nav a.actif { color: var(--vert); }

#message { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, 440px); padding: 12px 16px; border-radius: 12px; background: var(--encre); color: #FFFFFF; font-size: 14px; font-weight: 500; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 10; }
#message.visible { opacity: 1; }
#message.erreur { background: #8A2D00; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-size: 12px; color: var(--doux); font-weight: 600; }
td.n, th.n { text-align: right; white-space: nowrap; }
.defile { overflow-x: auto; }

@media print {
  body { background: #FFFFFF; }
  .nav, .non-imprime, #message { display: none !important; }
  #app { max-width: none; }
  .carte, .liste { border-color: #999; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { #message { transition: none; } }