:root {
  --papier: #f2edE2;
  --papier-ombre: #e6dfd0;
  --encre: #23201a;
  --encre-pale: #6b6455;
  --rouge-tampon: #b3382c;
  --vert-tampon: #2c6e3f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #35322b; }

body {
  font-family: "Courier New", Courier, monospace;
  color: var(--encre);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 4vh 16px 8vh;
}

#dossier {
  background: var(--papier);
  width: 100%;
  max-width: 680px;
  padding: 40px 44px 56px;
  box-shadow: 0 1px 0 var(--papier-ombre) inset, 0 18px 50px rgba(0,0,0,.45);
  position: relative;
  /* léger désaxage : les vrais dossiers ne sont jamais droits */
  transform: rotate(-0.3deg);
}

@media (max-width: 600px) {
  #dossier { padding: 28px 20px 44px; transform: none; }
}

.entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ministere { font-weight: bold; letter-spacing: .18em; font-size: 13px; }
.bureau { font-size: 11px; color: var(--encre-pale); letter-spacing: .12em; margin-top: 4px; }

.tampon {
  border: 3px double var(--rouge-tampon);
  color: var(--rouge-tampon);
  font-weight: bold;
  letter-spacing: .22em;
  padding: 6px 14px;
  font-size: 13px;
  transform: rotate(6deg);
  opacity: .85;
  white-space: nowrap;
  user-select: none;
}

.separateur {
  border-bottom: 1px dashed var(--encre-pale);
  margin: 22px 0;
}

.reference { font-size: 11px; color: var(--encre-pale); letter-spacing: .08em; }

.objet {
  font-size: 26px;
  margin-top: 18px;
  letter-spacing: .04em;
  font-weight: bold;
}
.objet-vous { text-decoration: underline; text-underline-offset: 5px; }

.preambule {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--encre-pale);
  font-style: italic;
}

/* ---- pièces ---- */

.piece { margin: 20px 0; opacity: 0; animation: apparait .35s ease forwards; }

@keyframes apparait {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.piece-numero {
  font-size: 11px;
  color: var(--encre-pale);
  letter-spacing: .14em;
}

.piece-valeur {
  font-size: 15px;
  font-weight: bold;
  margin-top: 3px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.piece-commentaire {
  font-size: 13px;
  font-style: italic;
  color: var(--encre-pale);
  margin-top: 3px;
  line-height: 1.55;
}

.curseur-attente {
  display: inline-block;
  animation: clignote 1s steps(1) infinite;
  font-weight: bold;
}

@keyframes clignote { 50% { opacity: 0; } }

/* ---- verdict ---- */

.cache { display: none; }

.verdict-titre {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--encre-pale);
}

.verdict-cadre {
  border: 2px solid var(--encre);
  padding: 20px 22px;
  margin-top: 14px;
}

.verdict-profil { font-size: 19px; font-weight: bold; letter-spacing: .03em; }

.verdict-texte {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--encre-pale);
}

.tampon-valide {
  border-color: var(--vert-tampon);
  color: var(--vert-tampon);
  display: inline-block;
  margin-top: 22px;
  transform: rotate(-4deg) scale(1);
  animation: tamponne .3s cubic-bezier(.2, 2.2, .4, 1) both;
  animation-delay: .5s;
}

@keyframes tamponne {
  from { transform: rotate(-4deg) scale(2.4); opacity: 0; }
  to   { transform: rotate(-4deg) scale(1); opacity: .85; }
}

.note-service {
  margin-top: 34px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--encre-pale);
  border-left: 3px solid var(--papier-ombre);
  padding-left: 16px;
}
.note-service p + p { margin-top: 10px; }
.note-titre { font-weight: bold; letter-spacing: .14em; color: var(--encre); }

.actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }

.actions button {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  background: none;
  border: 2px solid var(--encre);
  color: var(--encre);
  padding: 10px 16px;
  cursor: pointer;
}

.actions button:hover { background: var(--encre); color: var(--papier); }

.pied {
  margin-top: 26px;
  font-size: 11px;
  color: #8a857a;
  text-align: center;
  letter-spacing: .06em;
  padding: 0 16px;
}