/* La vitrine de vente — elle s'appuie sur base.css (fontes, jetons de couleur,
 * la classe .reglure et les .champ/.entrer de la page de connexion) et n'ajoute
 * que sa mise en page. Une seule colonne lisible, sobre : c'est une page
 * qu'un responsable lit une fois, pas une application. */

.vitrine {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.vente-tete h1 { margin: 0 0 .6rem; }
.vente-chapeau {
  font-size: 1.12rem;
  line-height: 1.55;
  opacity: .85;
  margin: 0 0 1rem;
}

.vente-bloc { margin: 2.2rem 0; }
.vente-bloc h2 { margin: 0 0 .8rem; }

.vente-liste { padding-left: 1.1rem; margin: 0; }
.vente-liste li { margin: .5rem 0; line-height: 1.5; }

.vente-prix { font-size: 1.25rem; font-weight: 600; margin: .2rem 0 .8rem; }

.vente-form { max-width: 34rem; }
.vente-deux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 540px) { .vente-deux { grid-template-columns: 1fr; } }

.vente-opt { font-weight: normal; opacity: .6; }
.vente-note { font-size: .9rem; opacity: .75; line-height: 1.45; }

/* Le honeypot : hors de l'écran, jamais display:none (les robots regardent). */
.hp { position: absolute; left: -9999px; top: -9999px; }

.vente-pied {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(128, 128, 128, .35);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .9rem;
  opacity: .85;
}