/*
 * L'offre en libre-service (contrat E) : la page de l'offre et le formulaire guidé. Surface Fidélité Péi
 * (charte §1) : écume, zones blanches, le lagon pour le seul bouton qui fait avancer.
 */

.offre-titre {
  margin: 0 0 var(--espace-2);
  font-family: var(--police-titre);
  font-size: var(--taille-36);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  letter-spacing: var(--interlettrage-titre);
}

.offre-sous-titre {
  margin: 0 0 var(--espace-3);
  font-family: var(--police-titre);
  font-size: var(--taille-22);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
}

.offre-prix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-4);
  margin: var(--espace-4) 0;
}

.offre-prix__montant {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--taille-48);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
}

.offre-prix__detail {
  color: var(--encre-douce);
}

.offre-liste {
  margin: 0 0 var(--espace-4);
  padding-inline-start: var(--espace-6);
}

.offre-liste li + li {
  margin-block-start: var(--espace-2);
}

/* L'étape : où l'on en est, sans barre de progression décorative. */
.offre-etape {
  margin: 0 0 var(--espace-2);
  color: var(--encre-douce);
}

.offre-formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}

.offre-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-3);
  margin: var(--espace-4) 0 0;
}

.offre-actions form {
  margin: 0;
}

.offre-deux-colonnes {
  display: grid;
  gap: var(--espace-6);
}

/* Au téléphone, la carte d'abord : on la voit changer pendant qu'on choisit, sans défiler. */
.offre-apercu {
  display: grid;
  gap: var(--espace-3);
  align-content: start;
  order: -1;
}

@media (min-width: 900px) {
  .offre-apercu {
    order: 0;
  }

  .offre-deux-colonnes {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }
}

.offre-boutique {
  margin: 0 0 var(--espace-4);
  padding: var(--espace-4);
  border: var(--trait) solid var(--ligne);
  border-radius: var(--rayon-grand);
}

.offre-boutique legend {
  padding: 0 var(--espace-2);
  font-weight: var(--graisse-forte);
}

.offre-couleurs {
  display: grid;
  gap: var(--espace-3);
}

.offre-couleur {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  min-height: var(--cible-tactile);
}

.offre-couleur input[type="color"] {
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  padding: 0;
  border: var(--trait) solid var(--ligne-forte);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
}

.offre-recap dt {
  color: var(--encre-douce);
}

.offre-recap dd {
  margin: 0 0 var(--espace-3);
}

.offre-code {
  display: inline-block;
  margin: var(--espace-2) 0;
  padding: var(--espace-3) var(--espace-4);
  border: var(--trait) solid var(--ligne-forte);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  font-size: var(--taille-36);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettrage-titre);
}

.offre-adresse {
  overflow-wrap: anywhere;
}

/* Un lien seul sur sa ligne : une cible de 48 px, comme un bouton. */
.offre-lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
}

/* L'abonnement, dans le même formulaire que l'entreprise (14/09). */
.offre-paiement {
  margin-block-start: var(--espace-4);
}

.offre-details summary {
  display: flex;
  align-items: center;
  min-height: var(--cible-tactile);
  cursor: pointer;
}

.offre-cadrage {
  width: 100%;
}

.offre-recap-court {
  margin-block-start: var(--espace-4);
}

/* La facture, montrée avant de payer (14/09). */
.offre-facture {
  margin-block-start: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  border: var(--trait) solid var(--ligne-forte);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
}

.offre-facture__titre {
  margin: 0 0 var(--espace-1);
  color: var(--encre-douce);
  font-size: var(--taille-14);
}

.offre-facture__corps {
  margin: 0;
  overflow-wrap: anywhere;
}