/* Lettre de motivation : formulaire à gauche, feuille A4 à droite (comme le Créateur de CV) */
/* site.css met overflow-x: hidden sur body : il devient un conteneur de défilement et l'aperçu ne colle plus. clip corrige ça. */
body { overflow-x: clip; }

.lettre-page { padding: 48px 0 80px; }
.lettre-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }

/* Formulaire */
.lettre-saisie h1 { margin: 0; font-size: clamp(38px, 2.4vw + 22px, 54px); line-height: 1.05; letter-spacing: -.015em; }
.lettre-intro { margin: 14px 0 32px; max-width: 30em; color: var(--muted); font-size: 17px; }
.lettre-form fieldset { margin: 0 0 28px; padding: 22px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.lettre-form legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; font: 400 24px/1.2 var(--title); }
.lettre-form legend + * { clear: left; }
.lettre-form .field { margin-bottom: 14px; }
.lettre-form select, .lettre-form textarea {
  width: 100%; border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 16px;
}
.lettre-form select { height: 48px; padding: 0 12px; }
.lettre-form textarea { display: block; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.lettre-form select:focus, .lettre-form textarea:focus { outline: 3px solid var(--soleil); outline-offset: 1px; border-color: var(--ink); }
.lettre-form ::placeholder { color: var(--muted); opacity: 1; }
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* Avertissement avant le PDF quand des champs sont vides */
.manque { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border-left: 4px solid var(--soleil); font-size: 15px; }
.manque p { margin: 0 0 6px; }
.manque-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lettre-conseils { margin: 14px 0 0; color: var(--muted); font-size: 14px; text-align: center; }

/* Aperçu : une vraie feuille A4, dont le texte suit la taille (11 pt sur 210 mm, environ 1,85 % de la largeur) */
.lettre-apercu { position: sticky; top: 24px; }
.feuille {
  container-type: inline-size;
  width: min(100%, calc((100svh - 48px) * 210 / 297)); aspect-ratio: 210 / 297; margin-inline: auto; overflow: hidden;
  padding: 11% 11.5%; background: #fffdf8; color: #1e1c17;
  border-radius: 4px; box-shadow: 0 1px 2px rgba(30,28,23,.08), 0 18px 48px rgba(30,28,23,.16);
  font: 400 15px/1.55 var(--title);
}
/* La feuille est le conteneur : ses enfants suivent la largeur de son texte (sans les marges), pas celle de la fenêtre.
   2,9 % donne environ 13 px sur ordinateur : un peu plus grand que les 11 pt réels, pour rester lisible à l'écran. */
.feuille > * { font-size: 2.9cqw; }
.feuille p { margin: 0 0 1.05em; }
.f-tete { display: flex; justify-content: space-between; gap: 8%; margin-bottom: 2.4em; }
.f-tete p { margin: 0; }
.f-dest { text-align: right; }
.f-date { text-align: right; margin-bottom: 2em !important; }
.f-objet { margin-bottom: 1.8em !important; font-weight: 600; }
.f-sign { margin-top: 2em !important; }
/* Polices au choix */
.p-newsreader { font-family: "Newsreader", Georgia, serif; }
.p-lora { font-family: "Lora", Georgia, serif; }
.p-garamond { font-family: "EB Garamond", Garamond, Georgia, serif; }
.p-source { font-family: "Source Sans 3", system-ui, sans-serif; }
.p-figtree { font-family: "Figtree", system-ui, sans-serif; }

/* Mises en page.
   Classique : expéditeur à gauche, destinataire à droite.
   Moderne : le nom en grand, souligné d'un filet, puis le destinataire en dessous à gauche.
   Épurée : tout aligné à gauche, comme un courrier administratif. */
.m-moderne .f-tete { flex-direction: column; gap: 1.6em; padding-bottom: 1.4em; border-bottom: 1.5px solid #1e1c17; }
.m-moderne .f-exp > span:first-child { display: block; margin-bottom: .2em; font-size: 2em; line-height: 1.1; letter-spacing: -.01em; }
.m-moderne .f-exp > br { display: none; }
.m-moderne .f-dest { text-align: left; }
.m-moderne .f-date { margin-top: 1.6em; }
.m-moderne .f-objet { text-transform: uppercase; letter-spacing: .06em; font-size: .9em; }
.m-epuree .f-tete { flex-direction: column; gap: 1.6em; }
.m-epuree .f-dest, .m-epuree .f-date { text-align: left; }
.m-epuree .f-objet { font-weight: 400; text-decoration: underline; text-underline-offset: .2em; }

/* Ce qui n'est pas encore rempli : en gris, souligné en pointillé */
.feuille .vide { color: #9a907d; text-decoration: underline dotted #c9bea7; text-underline-offset: .2em; }

@media (max-width: 900px) {
  .lettre-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lettre-apercu { position: static; }
  .feuille { width: 100%; aspect-ratio: auto; overflow: visible; padding: 32px 26px; }
  .feuille > * { font-size: 15px; }
}
@media (max-width: 480px) {
  .deux { grid-template-columns: minmax(0, 1fr); }
}

/* Impression : seule la feuille sort, sur une page A4 ; les trous non remplis restent sans pointillés */
@media print {
  @page { size: A4; margin: 22mm 24mm; }
  body * { visibility: hidden; }
  .lettre-apercu, .lettre-apercu * { visibility: visible; }
  .lettre-apercu { position: absolute; left: 0; top: 0; width: 100%; }
  .feuille { width: 100%; aspect-ratio: auto; overflow: visible; padding: 0; box-shadow: none; border-radius: 0; background: #fff; }
  .feuille > * { font-size: 11pt; }
  /* Générée quand même : un trait à compléter à la main plutôt que le nom du champ */
  .feuille .vide { color: transparent; text-decoration: none; border-bottom: 1px dotted #8f8470; }
}