:root{
  --principale:#12419c; --principale-fonce:#0b2a6b; --principale-clair:#eaf1fe; --bleu:#1e4797;
  --texte:#10172a; --gris:#4a5a78; --bord:#cbd5ea; --fond:#f5f8fe; --blanc:#fff;
  --erreur:#a4262c; --erreur-fond:#fdecee; --ok-fond:#e6f4ea;
  --rayon:14px;
  --police: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--police);color:var(--texte);background:var(--fond);line-height:1.5;min-height:100vh}
#app{min-height:100vh;display:flex;flex-direction:column}
.page{width:100%;max-width:520px;margin:0 auto;padding:20px 16px 32px;flex:1;display:flex;flex-direction:column}
.entete{text-align:center;margin-bottom:20px}
.entete h1{font-size:1.35rem;line-height:1.25;margin:8px 0 4px;color:var(--principale-fonce)}
.entete .sous{margin:0;color:var(--gris);font-size:.95rem}
.logo-mut{display:block;margin:0 auto;max-width:96px;max-height:96px;object-fit:contain}
.logo-recu{display:block;max-width:96px;max-height:96px;object-fit:contain;margin:0 0 8px}
.logo-apercu{display:block;max-width:128px;max-height:128px;object-fit:contain;border:1px solid var(--bord);border-radius:8px;padding:4px;background:#fff}
.toast{position:fixed;left:16px;right:16px;bottom:20px;z-index:50;max-width:480px;margin:0 auto;padding:12px 16px;border-radius:10px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.toast.ok{background:var(--principale);color:#fff}
.toast.erreur{background:#9b1c1c;color:#fff}
.marque{display:inline-block;width:56px;height:56px;line-height:56px;border-radius:50%;background:var(--principale);color:#fff;font-weight:800;font-size:1.6rem}
h2{font-size:1.15rem;margin:0 0 6px;color:var(--principale-fonce)}
h3{margin:0 0 6px;font-size:1.02rem;color:var(--principale-fonce)}
.carte{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);padding:18px 16px;margin-bottom:14px}
.aide{color:var(--gris);font-size:.92rem;margin:0 0 12px}
label{display:block;font-weight:600;font-size:.93rem;margin:14px 0 6px}
input,textarea,select{width:100%;font:inherit;padding:12px;border:1.5px solid var(--bord);border-radius:10px;background:#fff;color:var(--texte);min-height:48px}
textarea{min-height:110px}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(30,71,151,.25);border-color:var(--bleu)}
input[type=checkbox]{width:auto;min-height:0;margin-right:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:12px 16px;font:inherit;font-weight:700;border-radius:12px;border:2px solid var(--principale);background:var(--principale);color:#fff;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--principale-fonce)}
.btn:focus-visible,.lien:focus-visible{outline:3px solid rgba(30,71,151,.45);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.sec{background:#fff;color:var(--principale-fonce)}
.btn.sec:hover{background:var(--principale-clair)}
.btn.petit{min-height:40px;width:auto;padding:6px 14px;font-size:.92rem}
.btn.danger{background:#fff;color:var(--erreur);border-color:var(--erreur)}
.pile{display:flex;flex-direction:column;gap:12px}
.rang{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vignette{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vignette img{display:block;width:112px;height:112px;object-fit:cover;border-radius:10px;border:1.5px solid var(--bord)}
.lien{background:none;border:0;padding:6px 2px;font:inherit;color:var(--bleu);text-decoration:underline;cursor:pointer}
.centre{text-align:center;margin-top:14px}
.msg{padding:12px 14px;border-radius:10px;margin:0 0 14px;font-size:.95rem}
.msg.erreur{background:var(--erreur-fond);color:var(--erreur);border:1px solid #f1b8bd}
.msg.ok{background:var(--ok-fond);color:var(--principale-fonce);border:1px solid #b7dcc3}
.msg.info{background:var(--principale-clair);color:var(--principale-fonce);border:1px solid var(--bord)}
.msg.alerte{background:#fff4d6;color:#7a5600;border:1px solid #ecd48a}
.pied{text-align:center;padding:14px 16px 22px;font-size:.8rem;color:var(--gris)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.8rem;font-weight:700;background:var(--principale-clair);color:var(--principale-fonce)}
.badge.att{background:#fff4d6;color:#7a5600}
.badge.sus{background:var(--erreur-fond);color:var(--erreur)}
.identite{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:8px 0 0;font-size:.95rem}
.identite dt{color:var(--gris)}
.identite dd{margin:0;font-weight:600;word-break:break-word}
.retour{display:inline-block;margin-bottom:12px;color:var(--bleu)}
.haut{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.ligne{border-top:1px solid var(--bord);padding:12px 0}
.ligne:first-child{border-top:0}
.cases label{display:flex;align-items:flex-start;font-weight:500;margin:8px 0}
.cases input{margin-top:4px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
[hidden]{display:none!important}
.maj-bandeau{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--principale-fonce);color:#fff;border-radius:12px;padding:10px 14px}
.maj-bandeau .btn{width:auto;background:#fff;color:var(--principale-fonce);padding:8px 14px;margin:0}
.recu .total{font-size:1.2rem;font-weight:800;margin:16px 0 0;color:var(--principale-fonce)}
@media screen{.print-only{display:none}}
@media print{
  html,body,#app,.page{min-height:0!important;height:auto!important}
  body{background:#fff}
  .toast,.entete,.pied,.noprint,.maj-bandeau,.msg.info,.msg.alerte{display:none!important}
  .page{max-width:none;padding:0}
  .carte{border:1px solid #000;border-radius:0}
}
.carte.masque{opacity:.65}

/* Carte de mutualiste (85,6 × 54 mm) */
.cartes-paire{display:flex;flex-direction:column;gap:14px;align-items:center;margin:8px 0 12px}
.carte-face{container-type:inline-size;width:min(85.6mm,100%);aspect-ratio:85.6/54;border:1px solid #888;border-radius:3.2mm;overflow:hidden;background:#fff;color:#111;display:flex;flex-direction:column;box-sizing:border-box;break-inside:avoid}
.carte-face .carte-bandeau{display:flex;align-items:center;gap:2.5cqw;background:var(--principale);color:#fff;padding:2cqw 3.5cqw;font-size:4cqw}
.carte-face .carte-logo{height:8cqw;width:auto;max-width:14cqw;object-fit:contain;background:#fff;border-radius:1cqw}
.carte-face .carte-corps{display:flex;gap:3.5cqw;padding:3cqw 3.5cqw;flex:1;min-height:0}
.carte-face .carte-photo{width:26cqw;height:100%;max-height:34cqw;object-fit:cover;border:1px solid #999;border-radius:1.2cqw;flex:none}
.carte-face .carte-photo.vide{display:flex;align-items:center;justify-content:center;font-size:3cqw;color:#888;background:#f2f2f2}
.carte-face .carte-id{display:flex;flex-direction:column;gap:1.4cqw;min-width:0;font-size:3.5cqw;line-height:1.25}
.carte-face .carte-titre{font-size:2.8cqw;letter-spacing:.06em;color:var(--principale-fonce);font-weight:700}
.carte-face .carte-nom{font-size:4.6cqw;font-weight:800;word-break:break-word}
.carte-face .carte-ligne{word-break:break-word}
.carte-face .carte-ligne.petit{font-size:2.6cqw;color:#555}
.carte-face .carte-qr{width:30cqw;height:30cqw;flex:none;border:1px solid #ddd}
.vignette-photo{display:block;width:96px;height:120px;object-fit:cover;border-radius:8px;border:1.5px solid var(--bord);margin:6px 0}
@media print{
  .cartes-paire{gap:6mm;align-items:flex-start}
  .carte-face{width:85.6mm;height:54mm;aspect-ratio:auto;border:.2mm solid #000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .carte-face .carte-bandeau{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}