/*
 * prestations.css — Page Prestations (offres mariage)
 * ══════════════════════════════════════════════════════
 * Trois cards d'offres côte à côte.
 * L'offre centrale ("Émotion") est mise en avant visuellement.
 *
 * Pour modifier les offres (contenu), éditer includes/pages/prestations.php.
 * Pour changer le style des cards, modifier ce fichier.
 */

/* ── Introduction ───────────────────────────────────────────────────────── */
.prestations-intro {
  padding: 60px 80px 40px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.prestations-intro h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
}

.prestations-intro p {
  font-size: 15px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Grille des 3 offres ────────────────────────────────────────────────── */
.offres-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 80px 0;
  align-items: stretch;   /* Toutes les cards ont la même hauteur */
}

/* Card individuelle */
.offre-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Card mise en avant (offre populaire) */
.offre-card--popular {
  border-color: var(--blue);
  border-width: 2px;
  padding-top: 52px;   /* Espace pour le badge */
}

/* Badge "Le plus populaire" en haut de la card */
.offre-popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: 0 0 6px 6px;
  white-space: nowrap;
}

/* Titre de l'offre */
.offre-card-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

/* Séparateur décoratif sous le titre */
.offre-card-sep {
  width: 30px;
  height: 1px;
  background: var(--border);
  margin: 0 auto 28px;
}

/* Liste des prestations incluses */
.offre-card-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
  flex: 1;   /* Pousse le bouton en bas */
}

.offre-card-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  padding: 9px 0;
  border-bottom: 1px solid var(--bg);
  text-align: left;
}

/* Puce décorative devant chaque item */
.offre-card-list li::before {
  content: '▪';
  color: var(--blue);
  font-size: 10px;
  flex-shrink: 0;
}

/* Ligne récapitulative "X photos retouchées" — mise en valeur */
.offre-card-list li.offre-card-highlight {
  color: var(--dark);
  font-size: 13px;
  border-bottom: none;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px dashed var(--border);
}
.offre-card-list li.offre-card-highlight strong { font-weight: 700; }

/* Bouton "Demander un devis" en bas de chaque card */
.offre-card-btn {
  width: 100%;
  text-align: center;
  padding: 13px;
  font-size: 11px;
  letter-spacing: 2px;
}

/* ── Section CTA bas de page ────────────────────────────────────────────── */
.prestations-cta {
  padding: 50px 80px;
  text-align: center;
  background: var(--bg);
  margin-top: 40px;
}

.prestations-cta p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}

/* ── Responsive ≤ 768px ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .prestations-intro {
    padding: 40px 24px 28px;
  }

  .offres-cards {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 20px;
  }
}

/* ── Responsive 769px – 1024px (tablette) ───────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .offres-cards {
    padding: 0 40px;
    gap: 16px;
  }
}