/* ============================================================
   PIF GADGET - page abonnement
   Parcours du PDF « Parcours abonnement » : trois offres mensuelles
   côte à côte, bascule mensuel / annuel, parcours cadeau en bas.
   Les cartes .offre viennent d'assets/site.css.
   ============================================================ */

/* trois offres côte à côte, la formule du milieu mise en avant */
.offres--trois {
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.offre--star {
  box-shadow: 0 2px 0 rgba(0,19,38,.06), 0 24px 44px -18px rgba(0,19,38,.45);
  scale: 1.02;
}

.offre__engagement { margin: -6px 0 0; font-size: .82rem; color: var(--encre-60); }

/* argument sous les cartes : « pour seulement X € de plus… » */
.argument {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 26px auto 0;
  padding: 12px 20px;
  background: var(--jaune);
  border: 2px solid var(--encre);
  border-radius: 999px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
}

.mention-commune {
  max-width: 72ch;
  margin: 22px auto 0;
  text-align: center;
  font-size: .86rem;
  color: var(--encre-60);
}

/* ---------- Parcours cadeau ---------- */

.cadeau {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  background: var(--rouge);
  color: var(--blanc);
  border-radius: 26px;
  padding: clamp(24px, 3.4vw, 46px);
  overflow: hidden;
}

.cadeau::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: rgba(255,238,0,.16);
  border-radius: 50%;
}

.cadeau > * { position: relative; z-index: 1; }

.cadeau h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600; color: var(--blanc); }
.cadeau p { margin: 12px 0 0; font-size: 1.02rem; opacity: .94; max-width: 52ch; }

.cadeau__points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-family: var(--titre); font-size: .92rem; }
.cadeau__points li::before { content: "•"; color: var(--jaune); margin-right: 8px; }

/* Emplacement du visuel à venir : cadre en pointillés */
.cadeau__visuel {
  justify-self: center;
  width: min(100%, 240px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2.5px dashed rgba(255,255,255,.7);
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  font-family: var(--titre);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  opacity: .9;
}

.cadeau .btn { margin-top: 22px; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  .offre--star { scale: none; }
  /* une colonne centrée : en 2 + 1 la troisième carte restait orpheline */
  .offres--trois { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .cadeau { grid-template-columns: 1fr; text-align: center; }
  .cadeau p, .cadeau__points { margin-inline: auto; justify-content: center; }
  .cadeau__visuel { width: min(60%, 200px); }
  .section__tete { align-items: start; }
  .bascule__note { display: block; margin: 8px 0 0; }
}

/* ---------- Thème WordPress : bascule par data-periode ---------- */

[data-periode="mensuel"] .si-annuel,
[data-periode="annuel"] .si-mensuel { display: none !important; }

.offre .btn.si-mensuel, .offre .btn.si-annuel { margin-top: auto; }

/* visuel cadeau : image fournie par l'équipe, sinon une seule colonne */
.cadeau__visuel--image { aspect-ratio: auto; border: 0; background: none; object-fit: contain; opacity: 1; padding: 0; }
.cadeau--sans-visuel { grid-template-columns: 1fr; }