/* Page de réponse : mise en page propre à la page, au-dessus de tokens.css et bundle.css. */

a { color: var(--gold-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
[hidden] { display: none !important; }

.entete { padding: var(--space-12) var(--space-4) var(--space-8); display: flex; flex-direction: column; align-items: center; text-align: center; }
.entete__split { display: flex; align-items: center; justify-content: center; }
/* Le filet de l'aquarelle est à 68,6 % de sa largeur : le texte se cale juste à sa droite. */
.entete__aquarelle { width: 168px; height: 252px; object-fit: contain; mix-blend-mode: multiply; flex-shrink: 0; display: block; }
.entete__mots { margin-left: -29px; text-align: left; display: flex; flex-direction: column; gap: var(--space-2); }
.entete__titre { font: var(--text-display-l); margin: 0; }
.entete__date { font: var(--text-date); letter-spacing: 0.02em; }
.entete__noms { margin: var(--space-8) 0 0; font: var(--text-names); letter-spacing: 0.2em; text-transform: uppercase; }
.entete__noms .amp { color: var(--gold); }
.entete__lieu { margin: var(--space-1) 0 var(--space-6); font: var(--text-place); letter-spacing: 0.16em; text-transform: uppercase; }
.entete__lead { margin: 0; max-width: 32rem; font: var(--text-lead); color: var(--ink-muted); }

.scene { background: var(--paper-warm); padding: var(--space-12) var(--space-4) var(--space-16); display: flex; justify-content: center; }
.carte { width: 100%; max-width: var(--measure); background: var(--paper); box-shadow: var(--shadow-paper); padding: var(--space-8) var(--space-6); box-sizing: border-box; }

.formulaire { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; }
.question { display: flex; flex-direction: column; gap: var(--space-4); }
.question + .question { padding-top: var(--space-8); border-top: var(--border-hairline) solid var(--line-soft); }
.question__numero { margin: 0; font: var(--text-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.question__titre, .fa-choice legend.question__titre { margin: 0; padding: 0; font: var(--text-heading); letter-spacing: 0; text-transform: none; }
.fa-choice legend.question__titre { margin-bottom: var(--space-4); }
.fa-choice--colonne { grid-template-columns: minmax(0, 1fr); }
.fa-field p, .fa-field__error { margin: 0; }
textarea.fa-input { resize: vertical; }

.foyer { margin: 0; font: var(--text-title); }
.envoi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

.merci { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-4) 0; }
.merci__script { font: var(--text-script); color: var(--gold); }
.merci__titre { margin: var(--space-2) 0 0; font: var(--text-title); }
.recap { margin: var(--space-2) 0 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-2) var(--space-4); text-align: left; font: var(--text-small); border-top: var(--border-hairline) solid var(--line-soft); padding-top: var(--space-4); }
.recap dt { color: var(--ink-muted); font: var(--text-label); line-height: 22px; letter-spacing: 0.16em; text-transform: uppercase; }
.recap dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.note { margin: 0; font: var(--text-small); color: var(--ink-muted); }

.pied { padding: var(--space-12) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.pied .fa-divider { width: 100%; max-width: 20rem; }
.pied__ginkgo { width: 72px; height: 108px; object-fit: contain; mix-blend-mode: multiply; display: block; flex-shrink: 0; }
.pied p { margin: 0; font: var(--text-small); color: var(--ink-muted); }

@media (min-width: 40rem) {
  .carte { padding: var(--space-12); }
  .scene { padding-top: var(--space-16); }
}