/* Offres — trois colonnes réglées. L'offre centrale passe en encre pleine :
   la hiérarchie se lit à la matière, pas à une ombre portée. */

.offres-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.offre {
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
  background: var(--bg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  transition: background-color var(--dur-2) var(--ease-sortie);
}
.offre:hover { background: var(--papier); }

.offre-mise-en-avant {
  background: var(--nuit);
  color: var(--os);
  --trait: var(--trait-clair);
  --texte-doux: rgba(243, 240, 233, 0.74);
}
.offre-mise-en-avant:hover { background: var(--nuit-2); }

.offre-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.offre-nom {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
}
.offre-marque {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--orange-texte);
}

.offre-prix {
  margin-top: var(--sp-4);
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  letter-spacing: -0.035em;
  line-height: 1;
}
.offre-modalite { margin-top: 5px; font-size: var(--fs-small); color: var(--texte-doux); }
.offre-resume { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--texte-doux); line-height: 1.55; }

.offre-perimetre {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--trait);
  font-size: var(--fs-small);
  font-weight: 600;
}

.offre-points {
  margin-top: var(--sp-4);
  display: grid;
  gap: 9px;
  flex: 1;
}
.offre-points li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  font-size: var(--fs-small);
  color: var(--texte-doux);
  line-height: 1.5;
}
.offre-points .icone { width: 12px; height: 12px; margin-top: 5px; color: var(--orange-texte); }

.offre .btn { margin-top: var(--sp-5); }

.offres-note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--texte-doux); }

@media (max-width: 900px) {
  .offres-grille { grid-template-columns: 1fr; }
}

/* --- quatre offres : trois formules web, puis l'application ----------
   L'application mobile ne se compare pas aux trois autres (ni pages, ni
   hébergement, ni référencement) : elle prend une bande à part sous la
   grille plutôt qu'une quatrième colonne trompeuse. */

.offre-abonnement {
  margin-top: 6px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  font-size: 1.05rem;
  color: var(--texte);
}
.offre-abonnement span { color: var(--texte-doux); font-size: var(--fs-small); }
.offre-mise-en-avant .offre-abonnement { color: var(--os); }
.offre-mise-en-avant .offre-abonnement span { color: rgba(243, 240, 233, 0.74); }

.offre-pour {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--trait);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
}
.offre-mise-en-avant .offre-pour {
  border-color: var(--trait-clair);
  color: rgba(243, 240, 233, 0.74);
}

/* Sur une carte large, les enfants sont une liste à plat : les laisser
   se répartir sur trois colonnes dans l'ordre du source éparpillait le
   montant, la mention et le périmètre sur des colonnes différentes.
   Tout reste donc dans la première colonne, et seule la liste des
   prestations passe à droite, sur toute la hauteur. */
.offre-large {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 86px);
  align-content: start;
}
.offre-large > * { grid-column: 1; }
.offre-large .offre-points {
  grid-column: 2;
  grid-row: 1 / span 99;
  align-self: start;
  margin-top: 0;
}
.offre-large .offre-resume { max-width: 52ch; }

@media (max-width: 980px) {
  .offre-large { grid-template-columns: 1fr; }
  .offre-large > *, .offre-large .offre-points { grid-column: 1; }
  .offre-large .offre-points { grid-row: auto; margin-top: var(--sp-5); }
}

/* « À partir de » se pose au-dessus du montant : collé devant, il rendait
   la ligne d'abonnement illisible (« puis à partir de 129 € / mois »). */
.offre-prefixe {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
  margin-bottom: 2px;
}