/* ==================================================================
   Faire ma demande : la lettre (24/10/2026)
   ==================================================================
   Chargée après pages.css, qu'elle ne modifie pas. Le papier seul, sans
   chemise, plié en trois : le pan du milieu, retourné, prend la lumière
   autrement. À la place de l'objet, le téléphone à cadran du guéridon
   (img/telephone.png). Les prestations à cocher sont rangées par
   famille, chacune repliée (details) : une case vide, une croix tapée
   quand elle est cochée. Sert aussi aux pages que le serveur répond
   (site/reponses.js).
   ================================================================== */

.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-tel { grid-row: 1 / span 2; width: 78px; height: 66px; margin-top: 4px; }
.lettre .doc-tete > .chapeau, .lettre .doc-tete > .lettre-direct { grid-column: 1 / -1; }
.lettre h1 { text-wrap: balance; }
.lettre-direct { margin-top: 18px; color: var(--encre-2); }
.lettre-direct .lien-seul { color: var(--encre); font-family: var(--f-titre); font-size: var(--t-etiquette); }

.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-message .boutons { margin-top: 16px; }
.lettre-corps:has([aria-invalid="true"]) > #form-err {
  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, .lettre .choix { scroll-margin-top: 170px; }
html:has(#demande) { scroll-behavior: auto; }

.champ .requis { margin-left: 2px; color: var(--encre-2); }

/* la grande case : une feuille réglée */
.lettre .champ textarea {
  min-height: 190px;
  padding: 7px 12px 10px;
  line-height: 28px;
  font-family: var(--f-texte); font-size: var(--t-texte);
  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;
}

/* ---------- les prestations à cocher ---------- */
.choix { margin: 0; padding: 0; border: 0; min-width: 0; }
.choix legend { padding: 0; margin-bottom: 8px; font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.35; }
.choix-famille { border-bottom: 1px dotted var(--pointille); }
.choix-famille:first-of-type { border-top: 1px solid var(--encre); }
.choix-famille summary {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 0;
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.3;
  cursor: pointer; list-style: none;
}
.choix-famille summary::-webkit-details-marker { display: none; }
/* le repli : un petit triangle tapé, qui tourne à l'ouverture */
.choix-famille summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--encre);
}
.choix-famille[open] summary::before { transform: rotate(90deg); }
.choix-nom { flex: 1 1 auto; }
.choix-n { flex: none; color: var(--encre-2); }
.choix-n:empty { display: none; }
.choix-famille ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; padding: 0 0 12px 21px; }
.choix-resume { margin-top: 10px; color: var(--encre-2); font-size: 16px; line-height: 1.5; font-style: italic; }

/* une case à cocher tapée : un carré à l'encre, une croix quand c'est coché */
.case { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 9px 0 7px; cursor: pointer; line-height: 1.4; }
.case input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--encre); border-radius: 0;
  background: rgba(255, 252, 242, 0.6);
  display: grid; place-content: center;
  cursor: pointer;
}
.case input::before {
  content: ""; width: 12px; height: 12px;
  background:
    linear-gradient(45deg, transparent 43%, var(--encre) 43%, var(--encre) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--encre) 43%, var(--encre) 57%, transparent 57%);
  transform: scale(0);
}
.case input:checked::before { transform: scale(1); }
.case input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.case span { font-family: var(--f-texte); font-size: 17px; }
.choix-famille .case:has(input:checked) span { font-weight: 700; }

/* ---------- les fichiers choisis ---------- */
.lettre input[type="file"] {
  min-height: 48px; padding: 10px 0;
  font-family: var(--f-texte); font-size: 16px; color: var(--encre-2);
  border: 0; background: none;
}
.lettre input[type="file"]::file-selector-button {
  min-height: 44px; margin-right: 14px; padding: 0 16px;
  border: 1.5px solid var(--encre); border-radius: 0;
  background: transparent; color: var(--encre);
  font-family: var(--f-titre); font-size: var(--t-etiquette); cursor: pointer;
}
@media (hover: hover) { .lettre input[type="file"]::file-selector-button:hover { background: var(--encre); color: var(--papier); } }
.fichiers-choisis { border-top: 1px dotted var(--pointille); }
.fichiers-choisis li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px dotted var(--pointille); }
.fichiers-choisis .f-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.fichiers-choisis .f-taille { flex: none; color: var(--encre-2); font-family: var(--f-titre); font-size: var(--t-etiquette); }
.fichiers-choisis button {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; background: none; color: var(--encre);
  font-family: var(--f-titre); font-size: var(--t-etiquette); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fichiers-total { margin-top: 6px; color: var(--encre-2); font-size: 16px; font-style: italic; }

/* ---------- le diagnostic, avant de le joindre ---------- */
.diag-choix .case span { font-family: var(--f-titre); font-size: var(--t-etiquette); }
.document .diag-choix .aide a { padding-block: 12px; }
.diag-apercu {
  margin-top: 6px; padding: 12px 14px;
  background: #07100f; color: #cfeee6;
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.35;
}
.diag-apercu > div { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 3px 0; }
.diag-apercu dt { color: #9fc7bd; }
.diag-apercu dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- l'envoi ---------- */
.lettre-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.lettre-envoi .bouton { min-width: 11em; }
.lettre-mention { flex: 1 1 14em; 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-tel { grid-row: 1 / span 2; width: 52px; height: 44px; }
  .choix-famille ul { grid-template-columns: 1fr; padding-left: 4px; }
  .lettre-envoi .bouton { width: 100%; }
}
@media print {
  .lettre::after { display: none; }
}