/* Prix : une offre phare, deux offres d’entrée plus discrètes. Jamais trois colonnes égales côte à côte :
   le site dit lui-même que ce qui se compare se négocie. Pas de mécanisme d’animation propre : la section
   renseigne, elle ne met pas en scène. Les montants suivent la règle du constat : chiffres en grotesque. */

.prix {
  padding-block: var(--pas);
  background: var(--blanc);
}

.prix__grille {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
}

/* Plus petit que le t-titre des autres sections : celles-ci portent une seule phrase à lire une fois,
   celle-ci ouvre une page de référence qu'on vient consulter pour des chiffres. Sur un grand écran,
   le t-titre plafonne à 140px : bien pour une phrase de deux lignes, disproportionné devant une liste
   de prix. Mêmes proportions optiques (opsz, graisse), plafond abaissé. */
.prix__titre {
  max-width: 18ch;
  font-size: clamp(2.25rem, 4.4vw, 4.75rem);
  font-variation-settings: "opsz" 56;
  letter-spacing: -0.03em;
}

.prix__chapo {
  max-width: 34em;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: var(--t-grand);
  font-variation-settings: "opsz" 28;
  font-weight: 380;
  line-height: 1.4;
  color: var(--texte);
}

/* L’offre phare : un filet d’encre la tient, rien d’autre. */

.prix__phare {
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1.5px solid var(--encre);
}

.prix__etiquette,
.prix__sous-titre {
  margin: 0;
  color: var(--texte);
}

.prix__nom {
  margin: 14px 0 0;
  font-size: clamp(1.75rem, 2.9vw, 3rem);
  font-variation-settings: "opsz" 48;
  font-weight: 350;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--encre);
}

.prix__montant {
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  color: var(--encre);
}

.prix__de {
  display: block;
  font-family: var(--grotesque);
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--texte);
}

.prix__chiffre {
  display: block;
  margin-top: 6px;
  font-family: var(--grotesque);
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -0.045em;
}

.prix__ht {
  margin-left: .35em;
  font-size: var(--t-grand);
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: .9em;
}

.prix__description {
  max-width: 34em;
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  color: var(--texte);
}

.prix__phare .prix__sous-titre {
  margin-top: clamp(28px, 3.4vw, 40px);
}

/* Deux listes de même facture : ce qui est compris, puis ce qui change. Aucune puce « + » : le signe
   plus sur la seconde liste donnait l'impression d'un compteur qui monte. Le poste en encre suffit. */

.prix__recu,
.prix__variables {
  max-width: 36em;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.prix__recu li,
.prix__variables li {
  padding: 14px 0;
  border-top: 1px solid var(--filet);
  color: var(--texte);
}

.prix__poste {
  font-weight: 500;
  color: var(--encre);
}

/* Les annotations, en italique du site, comme celles de la méthode. */
.prix__reglement,
.prix__relecture,
.prix__reserve,
.prix__suite {
  max-width: 34em;
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  font-variation-settings: "opsz" 20;
  font-style: italic;
  color: var(--texte);
}

/* Les offres d’entrée : plus petites, empilées, sans chiffre géant. */

.prix__offre {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
}

.prix__offre + .prix__offre {
  margin-top: 22px;
}

.prix__offre-nom {
  margin: 0;
  font-size: var(--t-grand);
  font-variation-settings: "opsz" 28;
  font-weight: 380;
  line-height: 1.2;
  color: var(--encre);
}

.prix__offre-texte {
  margin: 8px 0 0;
  color: var(--texte);
}

/* La réserve : ce que l'offre étroite ne peut pas faire. Elle est dite avant le prix, pas après. */
.prix__reserve {
  margin-top: 10px;
  font-size: var(--t-texte);
}

.prix__offre-montant {
  margin: 12px 0 0;
  font-family: var(--grotesque);
  font-size: var(--t-grand);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--encre);
}

.prix__offre-montant .prix__de {
  display: inline;
  margin-right: .4em;
}

.prix__suite {
  margin-top: 24px;
}

/* Grand écran : l’offre phare prend la place, les deux autres se rangent à côté, plus bas d’un cran. */
@media (min-width: 1080px) {
  .prix__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gouttiere);
    row-gap: clamp(56px, 6vw, 96px);
    align-items: start;
  }

  .prix__entete,
  .prix__action {
    grid-column: 1 / -1;
  }

  .prix__phare {
    grid-column: 1 / span 7;
  }

  /* Épinglée sous l'en-tête : l'offre phare est longue à lire, et sans cela la colonne des offres
     étroites défilait avec elle et finissait hors champ avant sa dernière ligne. */
  .prix__autres {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--h-entete) + 24px);
  }
}