#tarifs {
  padding: var(--sp-lg) 0;
  background: var(--surface) url('../images/bg-hero.webp') center/cover no-repeat;
}

/* "Écran" plein écran : quel que soit ce qui est affiché (l'écran de choix,
   ou une carte révélée), ça occupe toute la hauteur visible sous la nav et
   c'est centré verticalement — comme une vraie page, pas un simple fragment
   qui apparaît là où il tombe dans le flux. Le bandeau de parrainage plus
   bas dans le document reste donc invisible tant qu'on ne scrolle pas. */
.tarifs-screen {
  position: relative;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* Deux grands encadrés côte à côte, même ratio qu'avant (1fr / 2fr) mais
   beaucoup plus spacieux — ils occupent presque toute la largeur/hauteur
   disponible, avec juste une petite marge autour. Les deux titres sont
   TOUJOURS à la même hauteur (même padding-top, pas de centrage vertical
   différent entre les deux colonnes). */
.tarifs-split {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-lg);
}

.tarifs-split[hidden] { display: none; }

.tarifs-col {
  background-color: #f3f0e8;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.tarifs-col:not(.tarifs-col--forfait):not(.tarifs-col--revalorisation) { background-image: url('../images/frame-ponctuelle.webp'); }
.tarifs-col--forfait,
.tarifs-col--revalorisation {
  background-image: url('../images/frame-forfait.webp');
  padding-left: calc(var(--sp-lg) - 1cm);
  padding-right: calc(var(--sp-lg) - 1cm);
}

/* Le titre, plus long ("Revalorisation avant vente ou location"), colle au
   motif décoratif du haut du cadre — on le décale un peu plus bas. */
.tarifs-col--revalorisation h3 {
  margin-top: var(--sp-sm);
}

.tarifs-col[hidden] { display: none; }

/* Quand une seule carte est affichée (Élagage, ou un choix fait depuis
   l'écran "Quel est votre besoin ?"), elle prend toute la largeur
   disponible mais reste limitée en largeur et centrée horizontalement — le
   centrage VERTICAL, lui, vient de .tarifs-screen (le parent). */
.tarifs-split--single-col {
  display: block;
}
.tarifs-split--single-col .tarifs-col {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* Écran "Quel est votre besoin ?" — uniquement visible tant qu'aucun choix
   n'a été fait depuis le bouton Héro (aucun pilier d'origine connu). Fond
   blanc semi-transparent + flou, bords adoucis (grand rayon + ombre large
   et diffuse plutôt qu'une bordure nette). */
.tarifs-choice-overlay {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-lg);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  border-radius: 32px;
  box-shadow: 0 0 80px 40px rgba(255,255,255,0.35);
  text-align: center;
}

.tarifs-choice-overlay[hidden] { display: none; }

.tarifs-choice-title {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--primary);
  margin-bottom: var(--sp-lg);
}

.tarifs-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  max-width: 420px;
  margin: 0 auto;
}

.tarifs-choice-btn {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition);
}

.tarifs-choice-btn:hover {
  border-color: var(--primary);
  background: #f0f7f2;
  transform: translateY(-2px);
}

.tarifs-choice-back {
  /* Position absolue : ne doit pas consommer de hauteur dans le flux, sinon
     ça décale vers le bas le centrage vertical de .tarifs-screen. */
  position: absolute;
  top: var(--sp-md);
  left: 0;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
}

.tarifs-choice-back[hidden] { display: none; }

/* Palier Revalorisation : pas de visuel dédié pour l'instant (image à
   venir) — carte simple plutôt que la carte-photo Essentiel/Complet/Premium. */
.reval-card {
  /* Sans ce min-width, une grille à 1fr s'élargit pour accueillir le mot le
     plus long ("Rafraîchissement") sans le couper — ce qui fait déborder la
     dernière carte hors du cadre. min-width: 0 autorise la carte à se
     réduire sous cette largeur "naturelle" et à passer le texte à la ligne. */
  min-width: 0;
  background: var(--white);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.reval-card:hover { transform: translateY(-3px); border-color: var(--primary); }

.reval-card.is-selected {
  border-color: #c9a84c;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.reval-card h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary);
}

/* Réutilise les animations forfait-btn-glow/forfait-btn-shine déjà définies
   plus bas dans ce fichier pour #forfait-devis-btn.is-armed. */
#revalorisation-devis-btn.is-armed {
  position: relative;
  overflow: hidden;
  animation: forfait-btn-glow 1.8s ease-in-out infinite;
}

#revalorisation-devis-btn.is-armed::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: forfait-btn-shine 2.2s ease-in-out infinite;
}

.tarifs-col h3 {
  text-align: center;
  margin-bottom: var(--sp-sm);
}

.tarifs-col-desc {
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-muted);
  /* Décalé du titre pour ne pas chevaucher le motif décoratif du cadre. */
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-lg);
  max-width: none;
}

.tarifs-col-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  margin-bottom: var(--sp-sm);
}

.tarifs-col > .btn { align-self: center; margin-top: auto; }

.forfaits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

/* Chaque palier reprend le visuel fourni (mêmes proportions que l'image
   d'origine : 1054×1492), avec le titre/prix posés dessus. Ce sont des
   <button> cliquables (choix du forfait) — on enlève le style natif. */
.forfait-card {
  aspect-ratio: 1054 / 1492;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  border: 3px solid transparent;
  border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
}

.forfait-card:hover { transform: translateY(-3px); }

.forfait-card.is-selected {
  border-color: #c9a84c;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  animation: forfait-pick 0.5s ease;
}

/* La déco (fleurs/branches) de l'image bouge légèrement au moment du choix. */
@keyframes forfait-pick {
  0%   { background-position: center; transform: translateY(-3px) scale(1); }
  40%  { background-position: center 46%; transform: translateY(-3px) scale(1.035); }
  100% { background-position: center; transform: translateY(-3px) scale(1); }
}

.forfait-card h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
}

.forfait-card--essentiel {
  background-image: url('../images/tier-essentiel.webp');
  color: var(--text);
}

.forfait-card--complet {
  background-image: url('../images/tier-complet.webp');
  color: var(--white);
}

.forfait-card--premium {
  background-image: url('../images/tier-premium.webp');
  color: var(--white);
}

.forfait-card--complet h4,
.forfait-card--complet .forfait-price,
.forfait-card--premium h4,
.forfait-card--premium .forfait-price {
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.forfait-price { font-family: var(--font-heading); font-size: 1.1rem; opacity: 0.9; }

.referral-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-lg);
  background: var(--primary);
  border-radius: var(--radius);
  padding: var(--sp-lg);
  margin-top: var(--sp-lg);
  color: var(--white);
}

.referral-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--sp-xs);
}

.referral-heading {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--white);
  margin-bottom: var(--sp-sm);
  line-height: 1.2;
}

.referral-banner-text p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
}

.referral-banner-text p strong {
  color: #c9a84c;
  font-size: 1rem;
}

.referral-discount-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-lg);
  text-align: center;
  min-width: 130px;
  flex-shrink: 0;
}

.referral-big {
  display: block;
  font-family: var(--font-title);
  font-size: 3.5rem;
  font-weight: 800;
  color: #c9a84c;
  line-height: 1;
}

.referral-big-sub {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .tarifs-split { grid-template-columns: 1fr; }
  .forfaits-grid { grid-template-columns: 1fr; }
  .referral-banner { grid-template-columns: 1fr; }
  .referral-discount-badge { flex-direction: row; gap: var(--sp-sm); justify-content: center; min-width: 0; padding: var(--sp-sm) var(--sp-md); }
  .referral-big { font-size: 2.5rem; }
}

/* Une fois un forfait choisi, le bouton "Demander un devis" se met à briller
   pour suggérer discrètement la suite. */
#forfait-devis-btn.is-armed {
  position: relative;
  overflow: hidden;
  animation: forfait-btn-glow 1.8s ease-in-out infinite;
}

#forfait-devis-btn.is-armed::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: forfait-btn-shine 2.2s ease-in-out infinite;
}

@keyframes forfait-btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
}

@keyframes forfait-btn-shine {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}