@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700&family=Inter:wght@400;500;600&display=swap");
:root{
  --navy:#172E4E; --navy-2:#0F2038; --bleu:#2F6DB5; --bleu-clair:#E8F0FA;
  --fond:#F5F7FA; --carte:#FFFFFF; --texte:#1B2433; --doux:#5B6678; --trait:#DCE2EA;
  --ok:#1F8A5B; --ok-clair:#E5F4EC; --att:#B7791F; --att-clair:#FBF1E0; --ko:#B42318; --ko-clair:#FDECEA;
  --rayon:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Inter Tight",Inter,system-ui,sans-serif;color:var(--navy);line-height:1.2;text-wrap:balance;margin:0 0 .5em}
h1{font-size:28px} h2{font-size:21px} h3{font-size:16px}
p{margin:0 0 .8em}
a{color:var(--bleu)}
.barre{background:var(--navy);color:#fff;padding:12px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:14px}
.barre img{height:22px}
.barre .titre{font-weight:600;font-size:14px;opacity:.9}
.barre .droite{margin-left:auto;font-size:13px;opacity:.8}
.page{max-width:860px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right,0px)) 80px max(16px,env(safe-area-inset-left,0px))}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:20px;margin-bottom:16px}
.etiquette{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bleu);margin-bottom:6px}
.doux{color:var(--doux)}
.petit{font-size:13px}
button,.bouton{font:inherit;font-weight:600;border:0;border-radius:8px;padding:10px 18px;cursor:pointer;background:var(--navy);color:#fff}
button:hover{background:var(--navy-2)}
button.second{background:#fff;color:var(--navy);border:1px solid var(--trait)}
button.second:hover{background:var(--bleu-clair)}
button.danger{background:var(--ko)}
button:disabled{opacity:.5;cursor:not-allowed}
input[type=text],input[type=password],input[type=date],textarea,select{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--trait);border-radius:8px;background:#fff;color:var(--texte)}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--bleu);outline-offset:-1px}
label.champ{display:block;font-weight:600;font-size:14px;margin:12px 0 6px}
.ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.erreur{color:var(--ko);font-size:14px}
.pastille{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.p-ok{background:var(--ok-clair);color:var(--ok)} .p-att{background:var(--att-clair);color:var(--att)} .p-ko{background:var(--ko-clair);color:var(--ko)} .p-neutre{background:var(--bleu-clair);color:var(--bleu)}
@media (max-width:560px){h1{font-size:23px}.carte{padding:16px}}
@media print{.barre,.no-print{display:none!important}body{background:#fff}.carte{break-inside:avoid;border-color:#ccc}}