/* Relire un courrier parti — la fenêtre ouverte depuis « Messages à la famille ».
 *
 * Une feuille à part plutôt qu'une rallonge d'`inscriptions.css`, qui était à
 * 392 lignes : le §14 s'arrête à 400, et ces règles ne servent qu'à une
 * fenêtre. Même coupure que pour `integrations.css`. */

/* --- Les en-têtes du message ---------------------------------------------- */

/* Deux colonnes : l'intitulé tenu à gauche, la valeur qui s'étale. En une
   seule colonne sur téléphone, où « ozarguiva@washington.ac.il » occupe déjà
   toute la largeur. */
.courrier-lu__entetes {
  display: grid;
  gap: calc(var(--pas) * 1);
  padding: calc(var(--pas) * 3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--carte-douce);
  font-size: 0.85rem;
}

.courrier-lu__ligne {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: calc(var(--pas) * 2);
  align-items: baseline;
}

.courrier-lu__intitule {
  color: var(--texte-tenu);
}

/* Une adresse ne se coupe nulle part naturellement : sans cela elle déborde
   de la fenêtre au lieu de passer à la ligne. */
.courrier-lu__valeur {
  overflow-wrap: anywhere;
}

@media (max-width: 36rem) {
  .courrier-lu__ligne {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* --- Le corps, dans son bac à sable ---------------------------------------- */

/* ⚠️ Fond blanc et non `--carte` : ce HTML a été écrit pour une boîte aux
   lettres, pas pour notre thème. Le poser sur un fond sombre le rendrait
   illisible en mode nuit — et surtout, il ne ressemblerait plus à ce que la
   famille a vu, ce qui est toute la raison d'ouvrir cette fenêtre. */
.courrier-lu__cadre {
  display: block;
  width: 100%;
  min-height: 22rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  background: var(--blanc);
}