.lettre { isolation: isolate; }
.lettre::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 33.3%, rgba(60, 44, 20, 0.05) 33.3%,
    rgba(60, 44, 20, 0.022) calc(33.3% + 90px), rgba(60, 44, 20, 0.022) calc(66.6% - 60px),
    rgba(60, 44, 20, 0.045) 66.6%, transparent 66.6%);
}

.doc-objet.lettre-enveloppe { grid-row: 1; width: 90px; height: 60px; margin-top: 10px; }
.lettre .doc-tete > .chapeau, .lettre .doc-tete > .lettre-direct { grid-column: 1 / -1; }

.lettre-direct { margin-top: 20px; color: var(--encre-2); }
.lettre-adresse { display: block; }
.lettre-direct .lettre-adresse a:not([class]) {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 0;
  color: var(--encre);
  font-family: var(--f-titre); font-size: var(--t-etiquette);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}

.lettre-corps {
  display: flex; flex-direction: column; gap: 22px;
  margin-top: clamp(22px, 4vw, 40px);
  padding-top: clamp(26px, 3.6vw, 36px);
  border-top: 3px double var(--encre);
}
.lettre-message p + p { margin-top: 6px; }
.lettre-corps:has([aria-invalid="true"]) > #form-err:has(> h2[hidden]) {
  position: sticky; top: 10px; z-index: 2;
  background: #f7f1e1;
  box-shadow: 0 8px 18px rgba(30, 20, 8, 0.28);
}
.lettre .champ input, .lettre .champ textarea { scroll-margin-top: 170px; }
html:has(#contact-form) { scroll-behavior: auto; }

.champ .requis { margin-left: 2px; color: var(--encre-2); }
.champ .lettre-exemple { font-style: italic; }

.lettre .champ textarea {
  min-height: 210px;
  padding: 7px 12px 10px;
  line-height: 28px;
  background:
    linear-gradient(to bottom, transparent 26px, rgba(27, 24, 18, 0.2) 26px, rgba(27, 24, 18, 0.2) 27px, transparent 27px) 0 7px / 100% 28px repeat-y local,
    rgba(255, 252, 242, 0.55);
}
.lettre .champ textarea:focus-visible {
  background:
    linear-gradient(to bottom, transparent 26px, rgba(27, 24, 18, 0.2) 26px, rgba(27, 24, 18, 0.2) 27px, transparent 27px) 0 7px / 100% 28px repeat-y local,
    #fffcf2;
}

.lettre-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.lettre-envoi .bouton { min-width: 9.5em; }
.lettre-mention { flex: 1 1 16em; color: var(--encre-2); font-size: 16px; line-height: 1.45; }
.lettre-obligatoire { max-width: 32em; color: var(--encre-2); font-size: var(--t-petit); line-height: 1.5; }
.document .lettre-obligatoire a:not([class]) { color: var(--encre); }

@media (max-width: 600px) {
  .doc-objet.lettre-enveloppe { width: 60px; height: 40px; margin-top: 6px; }
  .lettre-envoi .bouton { width: 100%; }
}

.bureau-poste {
  display: flex; justify-content: center;
  padding-top: clamp(36px, 7vh, 72px);
}
.poste {
  --trait: #140c07;
  --vitre: #c9cbad;
  --ecran: #0d1613;
  --phosphore: #e9f0dc;
  --phosphore-2: #c3cdb8;
  position: relative;
  width: min(100%, 680px);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
}
.poste-caisse, .poste-bois, .poste-vitre, .ecran {
  clip-path: polygon(
    0 calc(2 * var(--u)), var(--u) calc(2 * var(--u)), var(--u) var(--u), calc(2 * var(--u)) var(--u), calc(2 * var(--u)) 0,
    calc(100% - 2 * var(--u)) 0, calc(100% - 2 * var(--u)) var(--u), calc(100% - var(--u)) var(--u), calc(100% - var(--u)) calc(2 * var(--u)), 100% calc(2 * var(--u)),
    100% calc(100% - 2 * var(--u)), calc(100% - var(--u)) calc(100% - 2 * var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - 2 * var(--u)) calc(100% - var(--u)), calc(100% - 2 * var(--u)) 100%,
    calc(2 * var(--u)) 100%, calc(2 * var(--u)) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - 2 * var(--u)), 0 calc(100% - 2 * var(--u))
  );
}
.poste-caisse { --u: 7px; padding: 3px; background: var(--trait); }
.poste-bois {
  --u: 6px;
  padding: clamp(14px, 3.4vw, 30px) clamp(14px, 3.4vw, 30px) 0;
  background: #6a4125 url("img/bois-poste.png") 0 0 / 192px 96px;
  image-rendering: pixelated;
  box-shadow:
    inset 0 3px 0 rgba(255, 214, 170, 0.2),
    inset -3px 0 0 rgba(255, 214, 170, 0.08),
    inset 0 -5px 0 rgba(0, 0, 0, 0.35);
}
.poste-vitre {
  --u: 5px;
  padding: clamp(10px, 2.2vw, 18px);
  background: var(--vitre);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(40, 44, 30, 0.28);
}
.ecran {
  --u: 8px;
  padding: clamp(28px, 5.4vw, 56px) clamp(16px, 5vw, 56px) clamp(30px, 5.4vw, 56px);
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.3) 2px 3px),
    radial-gradient(90% 70% at 82% 0%, rgba(233, 240, 220, 0.07), rgba(233, 240, 220, 0) 70%),
    var(--ecran);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.75);
  color: var(--phosphore);
  text-align: center;
  image-rendering: auto;
}
.ecran-code { margin: 0 0 clamp(18px, 3vw, 28px); line-height: 0; }
.ecran-code img { display: inline-block; width: 130px; height: 45px; }
.ecran h1 {
  margin: 0 auto 14px; max-width: 14em;
  font-size: var(--t-h1); line-height: 1;
  text-wrap: balance;
}
.ecran .chapeau { margin: 0 auto; color: var(--phosphore-2); }
.ecran .boutons { justify-content: center; margin-top: clamp(24px, 3.6vw, 34px); }
.ecran .bouton { background: var(--phosphore); color: var(--ecran); }
@media (hover: hover) { .ecran .bouton:hover { background: var(--ambre); color: var(--sur-ambre); } }

.poste-reglages {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(10px, 1.8vw, 16px) 2px clamp(12px, 2vw, 18px) 8%;
  line-height: 0;
}
.poste-cadran { width: 72px; height: 12px; }
.poste-boutons { width: 39px; height: 18px; }
.poste-pieds { position: relative; display: block; height: 12px; }
.poste-pieds::before, .poste-pieds::after {
  content: ""; position: absolute; top: 0; width: 12%; height: 12px; background: var(--trait);
}
.poste-pieds::before { left: 22%; }
.poste-pieds::after { right: 22%; }

.cache-visuel {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (min-width: 761px) {
  .ecran-code img { width: 182px; height: 63px; }
  .poste-bois { background-size: 256px 128px; }
  .poste-cadran { width: 96px; height: 16px; }
  .poste-boutons { width: 52px; height: 24px; }
}
@media (max-width: 359px) {
  .poste-bois { padding: 10px 10px 0; }
  .poste-vitre { padding: 8px; }
  .ecran { padding-inline: 12px; }
  .ecran .bouton { padding: 0 16px 0 14px; gap: 10px; }
}