:root{--brun:#9b6f5c;--brun-fonce:#7a5444;--chocolat:#4a3128;--carte:#faf6f1;--texte:#3a2c26;--gris:#6e5c53;--bordure:#eadfd8}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#fff;color:var(--texte);font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.55}
.barre{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--bordure)}
.marque{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;letter-spacing:.08em;color:var(--chocolat)}
main{max-width:640px;margin:0 auto;padding:28px 20px 48px}
.ecran{display:flex;flex-direction:column;gap:16px}
h1{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:34px;line-height:1.1;color:var(--chocolat)}
.surtitre{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brun-fonce);font-weight:600}
.aide{margin:0;color:var(--gris);font-size:14px}
.bouton{font:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--brun);color:#fff;border:1px solid var(--brun);border-radius:2px;padding:15px 22px;min-height:48px;cursor:pointer}
.bouton:hover{background:var(--brun-fonce)}
.bouton:disabled{opacity:.6;cursor:default}
.bouton.sec{background:#fff;color:var(--brun-fonce);letter-spacing:.06em;text-transform:none;font-size:13px;padding:10px 14px;min-height:44px}
.lien{font:inherit;font-size:13px;font-weight:600;background:none;border:0;color:var(--brun-fonce);padding:10px;min-height:44px;cursor:pointer}
.champ{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:500}
.champ input{font:inherit;font-size:28px;letter-spacing:.3em;text-align:center;border:0;border-bottom:2px solid var(--brun);background:var(--carte);padding:14px 10px;color:var(--texte)}
.progression{display:flex;flex-direction:column;gap:6px}
.ligne{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.courtier{margin:0;font-size:13px;color:var(--gris)}
.jauge{height:6px;border-radius:3px;background:var(--bordure);overflow:hidden}
.jauge div{height:6px;background:#2e7d4f;width:0}
.groupe{background:var(--carte);border:1px solid var(--bordure);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.groupe h2{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);font-weight:600}
.piece{background:#fff;border:1px solid var(--bordure);border-radius:2px;padding:12px;display:flex;flex-direction:column;gap:8px}
.tete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tete b{font-size:14px}
.etat{font-size:11px;font-weight:600;border-radius:20px;padding:3px 10px;white-space:nowrap}
.e-ok{background:#e7f2ec;color:#24663f}.e-corriger{background:#f8e7e4;color:#9a3229}.e-verifier{background:#f2e9e2;color:#6b4a3c}.e-envoyer{background:#fbf1e1;color:#7f5310}
.note{font-size:12px;border-radius:4px;padding:8px 10px;background:var(--carte)}
.depot{display:flex;flex-direction:column;gap:8px}
.fichiers{font-size:12px;color:var(--gris)}
.message{margin-top:20px;font-size:14px}
.message.ok{color:#24663f}.message.erreur{color:#9a3229}
.pied{font-size:12px;color:var(--gris);border-top:1px solid var(--bordure);padding-top:12px;margin:0}
.cote{display:contents}
#groupes{order:1}
.cote .pied{order:2}
@media (min-width:900px){
  .barre{padding:20px 40px}
  main{padding:56px 40px 64px}
  body.large main{max-width:1180px}
  #ecranAttente,#ecranSansLien,#ecranEntree,#ecranCode{max-width:460px;margin:24px auto 0;padding:40px;border:1px solid var(--bordure);border-radius:4px;background:var(--carte)}
  #ecranDocuments{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
  .cote{display:flex;flex-direction:column;position:sticky;top:32px;gap:20px}
  h1{font-size:42px}
  .groupe{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px;align-items:start}
  .groupe h2{grid-column:1/-1}
  .message{position:fixed;bottom:24px;right:40px;max-width:380px;margin:0;background:#fff;border:1px solid var(--bordure);border-radius:4px;padding:12px 16px;box-shadow:0 4px 16px rgba(74,49,40,.12)}
}
.etat{display:inline-flex;align-items:center;gap:6px}
.roue{width:10px;height:10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.roue{animation-duration:2.4s}}