/* Page publique de paiement d'une mairie. Fond : couleur de la mairie (attribut
   style du body) ; en-tête : HTML de la mairie, inséré tel quel. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 40px 16px;
  font: 15px/1.5 Calibri, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: #1f2933;
}

.page {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.entete { overflow: hidden; }
.entete h1 { font-size: 24px; margin: 0 0 12px; }
.entete p { text-align: justify; }
.entete img { max-width: 100%; height: auto; }

.message { padding: 8px 0 4px; }
.message h1 { font-size: 22px; margin: 0 0 12px; }
.message p { margin: 0 0 12px; }

.alerte, .test {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.alerte { background: #fdeced; color: #a3202c; border: 1px solid #f3c2c7; }
.test { background: #fff5dc; color: #7a5200; border: 1px solid #f0d9a0; }

.paiement { margin-top: 20px; }

.champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

.champ { display: flex; flex-direction: column; gap: 6px; }
.libelle { font-style: italic; font-size: 16px; }

.champ input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #9aa5b1;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  background: #fff;
}
.champ input:focus { outline: 2px solid #1a3254; outline-offset: 1px; border-color: #1a3254; }
.champ.invalide input { border-color: #c4323f; background: #fff8f8; }
.erreur { color: #a3202c; font-size: 13px; font-weight: 600; }

.payer {
  margin-top: 22px;
  padding: 10px 28px;
  border: 0;
  border-radius: 6px;
  background: #1a3254;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.payer:hover { background: #0f2138; }
.payer:focus-visible { outline: 2px solid #1a3254; outline-offset: 2px; }

.securite { margin: 22px 0 0; }
.securite img { max-width: 100%; height: auto; }

a.retour { color: #1a3254; font-weight: 600; }

@media (max-width: 640px) {
  body { padding: 16px 10px; }
  .page { padding: 18px 16px; }
  .champs { grid-template-columns: 1fr; }
  .entete [style*="float"] { float: none !important; margin: 0 0 10px !important; }
}