/* ─── Thème vert & blanc — mariage ─── */

:root {
  --green-deep: #0d5c3a;
  --green-primary: #1a7a4c;
  --green-mid: #2d9a62;
  --green-light: #e8f5ee;
  --green-soft: #f4fbf7;
  --green-glow: rgba(45, 154, 98, 0.25);
  --white-pure: #ffffff;
  --white-warm: #fafffe;
  --primary: var(--green-primary);
  --rose-deep: var(--green-deep);
  --rose-petal: var(--green-mid);
  --bs-primary: var(--green-primary);
  --bs-primary-rgb: 26, 122, 76;
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--green-mid), var(--green-deep));
}

.page-overlay {
  background:
    radial-gradient(ellipse at 12% 45%, rgba(45, 154, 98, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 28%, rgba(232, 245, 238, 0.35) 0%, transparent 50%),
    linear-gradient(
      90deg,
      rgba(13, 50, 35, 0.72) 0%,
      rgba(255, 255, 255, 0.32) 14%,
      rgba(255, 255, 255, 0.58) 50%,
      rgba(255, 255, 255, 0.32) 86%,
      rgba(13, 50, 35, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(26, 122, 76, 0.08) 0%,
      rgba(255, 255, 255, 0.45) 45%,
      rgba(232, 245, 238, 0.65) 100%
    );
}

/* Pétales / feuilles vertes flottantes */
.floating-petal {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9) 0%,
    hsl(calc(140 + var(--hue, 0)), 45%, 75%) 50%,
    hsl(calc(145 + var(--hue, 0)), 50%, 55%) 100%
  );
  filter: drop-shadow(0 1px 3px rgba(26, 122, 76, 0.2));
}

/* Carte blanche & verte */
.invitation-info {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(232, 245, 238, 0.6) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 255, 252, 0.97) 50%, rgba(232, 245, 238, 0.95) 100%);
  border-color: rgba(45, 154, 98, 0.35);
}
.invitation-info::after {
  background-image: radial-gradient(rgba(45, 154, 98, 0.05) 1px, transparent 1px);
}
.invitation-info::before {
  background: linear-gradient(90deg, var(--green-deep), var(--green-mid), #fff, var(--green-light), var(--green-primary), var(--green-mid), var(--green-deep));
  background-size: 200% 100%;
  animation: ribbonShimmer 6s ease-in-out infinite;
}
@keyframes ribbonShimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.card-ornament {
  background:
    linear-gradient(135deg, var(--green-mid) 2px, transparent 2px) 0 0 / 16px 16px no-repeat,
    linear-gradient(225deg, var(--green-primary) 2px, transparent 2px) 100% 0 / 16px 16px no-repeat,
    linear-gradient(315deg, var(--green-mid) 2px, transparent 2px) 100% 100% / 16px 16px no-repeat,
    linear-gradient(45deg, var(--green-primary) 2px, transparent 2px) 0 100% / 16px 16px no-repeat;
  animation: ornamentGlow 4s ease-in-out infinite;
}
@keyframes ornamentGlow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* Hero — bague visible en fond */
.hero-banner {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(45, 154, 98, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 245, 238, 0.5) 100%);
  min-height: 420px;
}
.hero-banner-bg .rings-showcase {
  width: min(440px, 98%);
  height: min(440px, 75vw);
  margin: 0;
  opacity: 1;
  transform: translateY(5%);
}
.hero-banner-bg .rings {
  width: 100%;
  height: auto;
  max-width: 420px;
  opacity: 0.38;
  filter: drop-shadow(0 16px 40px rgba(201, 162, 39, 0.5)) drop-shadow(0 0 60px rgba(255, 255, 255, 0.4));
  animation: ringFloatHero 5s ease-in-out infinite;
}
.hero-banner-bg .rings-glow {
  opacity: 0.85;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.35) 0%, rgba(45, 154, 98, 0.12) 45%, transparent 72%);
  animation: ringGlowPulse 3s ease-in-out infinite;
}
@keyframes ringFloatHero {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.36; }
  50% { transform: translateY(-8px) scale(1.04); opacity: 0.44; }
}

/* Mosquées décoratives hero */
.hero-mosque {
  position: absolute;
  z-index: 0;
  color: var(--green-primary);
  opacity: 0.12;
  pointer-events: none;
  animation: mosqueFloat 8s ease-in-out infinite;
}
.hero-mosque svg {
  width: clamp(48px, 12vw, 72px);
  height: auto;
  display: block;
}
.hero-mosque--left {
  left: 4%;
  top: 18%;
  animation-delay: 0s;
}
.hero-mosque--right {
  right: 4%;
  top: 22%;
  animation-delay: 2s;
  transform: scaleX(-1);
}
.hero-mosque--center-left {
  left: 12%;
  bottom: 12%;
  opacity: 0.08;
  animation-delay: 4s;
}
.hero-mosque--center-right {
  right: 12%;
  bottom: 10%;
  opacity: 0.08;
  animation-delay: 1s;
  transform: scaleX(-1);
}
@keyframes mosqueFloat {
  0%, 100% { transform: translateY(0); opacity: 0.12; }
  50% { transform: translateY(-10px); opacity: 0.18; }
}
.hero-mosque--right,
.hero-mosque--center-right {
  animation-name: mosqueFloatMirrored;
}
@keyframes mosqueFloatMirrored {
  0%, 100% { transform: scaleX(-1) translateY(0); opacity: 0.12; }
  50% { transform: scaleX(-1) translateY(-10px); opacity: 0.18; }
}

.hero-title {
  border-color: rgba(45, 154, 98, 0.4);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 40px rgba(26, 122, 76, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  animation: titleGlowGreen 4s ease-in-out infinite;
}
@keyframes titleGlowGreen {
  0%, 100% { box-shadow: 0 12px 40px rgba(26, 122, 76, 0.08), 0 0 20px rgba(45, 154, 98, 0.1); }
  50% { box-shadow: 0 14px 48px rgba(26, 122, 76, 0.14), 0 0 32px rgba(45, 154, 98, 0.2); }
}
.hero-name {
  color: var(--green-deep) !important;
  -webkit-text-fill-color: var(--green-deep) !important;
}
.hero-name--bride {
  color: var(--green-primary) !important;
  -webkit-text-fill-color: var(--green-primary) !important;
}
.hero-banner .hero-amp,
.hero-amp {
  font-family: 'Great Vibes', 'Freestyle Script', cursive;
  font-size: clamp(2.2rem, 8vw, 3rem);
  color: var(--green-mid);
  animation: ampFloat 3s ease-in-out infinite;
  display: inline-block;
}
@keyframes ampFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}
.hero-bismillah { color: var(--green-deep); }
.hero-families span { color: var(--green-primary); }
.hero-date {
  border-color: rgba(45, 154, 98, 0.4);
  background: rgba(255, 255, 255, 0.95);
}

/* Cascade hero */
.hero-cascade .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--item-delay, 0ms);
}
.hero-cascade.is-animated .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

/* Compte à rebours vert */
.countdown {
  border-radius: 16px;
  border: 1px solid rgba(45, 154, 98, 0.25);
  background: rgba(255, 255, 255, 0.92);
}
.countdown-item {
  background: var(--white-pure);
  border: 1px solid rgba(45, 154, 98, 0.3);
  border-radius: 12px;
  padding: 0.45rem 0.55rem;
  min-width: 3.5rem;
}
.countdown-item.is-ticking {
  animation: countdownPulseGreen 0.45s ease;
}
@keyframes countdownPulseGreen {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); box-shadow: 0 4px 16px var(--green-glow); }
  100% { transform: scale(1); }
}
.countdown-num { color: var(--green-deep); }
.countdown-sep { color: var(--green-mid); font-size: 0.85rem; }

/* Séparateurs */
.section-divider--rose span,
.section-divider--green span {
  color: var(--green-mid);
  animation: mosqueSpin 8s ease-in-out infinite;
}
.section-divider--rose span svg,
.section-divider--green span svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}
@keyframes mosqueSpin {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}
.section-divider--rose::before,
.section-divider--rose::after,
.section-divider--green::before,
.section-divider--green::after {
  background: linear-gradient(90deg, transparent, rgba(45, 154, 98, 0.45), rgba(255, 255, 255, 0.8), transparent);
}

/* Citation */
.quote-block .quote-section {
  border-color: rgba(45, 154, 98, 0.25);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(232, 245, 238, 0.88));
  box-shadow: 0 4px 20px rgba(26, 122, 76, 0.06);
}
.quote-block .quote-section::before,
.quote-block .quote-section::after {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
  color: var(--green-mid);
  opacity: 0.2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='black' d='M24 4c-1 1.5-2.5 3-2.5 5.5 0 .4.1.8.4 1.1L24 16l2.1-5.4c.3-.3.4-.7.4-1.1 0-2.5-1.5-4-2.5-5.5zM24 12v8M10 20h28v20H10zM6 40h36'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='black' d='M24 4c-1 1.5-2.5 3-2.5 5.5 0 .4.1.8.4 1.1L24 16l2.1-5.4c.3-.3.4-.7.4-1.1 0-2.5-1.5-4-2.5-5.5zM24 12v8M10 20h28v20H10zM6 40h36'/%3E%3C/svg%3E") center/contain no-repeat;
}
.quote-block .quote-section::before { top: 0.5rem; left: 0.65rem; }
.quote-block .quote-section::after { bottom: 0.5rem; right: 0.65rem; transform: scaleX(-1); }

/* Galerie */
.gallery-section {
  border-color: rgba(45, 154, 98, 0.28);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(232, 245, 238, 0.9));
}
.gallery-title {
  color: var(--green-deep);
}
.gallery-title::after {
  background: linear-gradient(90deg, transparent, var(--green-mid), transparent);
  animation: lineExpand 2.5s ease-in-out infinite;
}
@keyframes lineExpand {
  0%, 100% { width: 50%; opacity: 0.6; }
  50% { width: 78%; opacity: 1; }
}
.photo-carousel-track {
  border-color: rgba(45, 154, 98, 0.4);
}
.photo-carousel-dots button.active {
  background: var(--green-mid);
  box-shadow: 0 0 10px var(--green-glow);
}

/* Programme & icônes mosquée */
.program-title {
  background: linear-gradient(135deg, var(--green-deep), var(--green-primary), var(--green-mid));
  box-shadow: 0 8px 28px rgba(26, 122, 76, 0.3);
  animation: titleBadgePulseGreen 3s ease-in-out infinite;
}
@keyframes titleBadgePulseGreen {
  0%, 100% { box-shadow: 0 8px 28px rgba(26, 122, 76, 0.25); }
  50% { box-shadow: 0 12px 36px rgba(45, 154, 98, 0.35); }
}
.program-card {
  border-color: rgba(45, 154, 98, 0.25);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(244, 251, 247, 0.96));
}
.program-card:hover {
  box-shadow: 0 14px 32px rgba(26, 122, 76, 0.12);
  border-color: rgba(45, 154, 98, 0.45);
}
.program-card-icon {
  border-color: rgba(45, 154, 98, 0.35);
  background: linear-gradient(135deg, #fff, var(--green-light));
  color: var(--green-primary);
  animation: iconBob 3s ease-in-out infinite;
  animation-delay: var(--reveal-delay, 0ms);
}
.program-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.program-card-icon--mosque {
  color: var(--green-deep);
  animation: iconBob 3s ease-in-out infinite, mosqueIconGlow 2.5s ease-in-out infinite;
}
@keyframes mosqueIconGlow {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
  50% { box-shadow: 0 4px 16px var(--green-glow); }
}
@keyframes iconBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.home-item { border-left-color: var(--green-mid); }
.mosque-item { border-left-color: var(--green-deep); }
.reception-item { border-left-color: #4a9e6e; }
.program-event { color: var(--green-deep); }
.program-event-reception { color: var(--green-primary); }

/* Boutons */
.call-btn {
  background: linear-gradient(135deg, var(--green-deep), var(--green-primary)) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(26, 122, 76, 0.28);
}
.invitation-closing { color: var(--green-deep) !important; }
.credit-name { color: var(--green-primary); }

/* Bokeh vert & blanc */
.ambient-bokeh span {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65) 0%, transparent 70%);
}
.ambient-bokeh span:nth-child(even) {
  background: radial-gradient(circle, rgba(45, 154, 98, 0.25) 0%, transparent 70%);
}

/* Loader vert */
.loader {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, 0.25) 0%, transparent 55%),
    linear-gradient(145deg, rgba(13, 60, 40, 0.98), rgba(26, 122, 76, 0.96), rgba(45, 154, 98, 0.9));
}
.loader-orbit {
  border-top-color: rgba(255, 255, 255, 0.85);
  border-right-color: rgba(200, 230, 210, 0.6);
}

/* Révélations scroll */
[data-reveal="fade-left"] { transform: translateX(-28px); }
[data-reveal="fade-left"].is-visible { transform: translateX(0); }
[data-reveal="fade-right"] { transform: translateX(28px); }
[data-reveal="fade-right"].is-visible { transform: translateX(0); }
[data-reveal="scale-in"] { transform: scale(0.94); }
[data-reveal="scale-in"].is-visible { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .floating-petal, .hero-amp, .section-divider--rose span,
  .section-divider--green span, .program-card-icon,
  .gallery-title::after, .invitation-info::before, .card-ornament,
  .hero-title, .program-title, .hero-mosque, .hero-banner-bg .rings {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .hero-banner-bg .rings { opacity: 0.32; max-width: 340px; }
  .hero-mosque { opacity: 0.08; }
  .countdown-item { min-width: 3rem; padding: 0.35rem 0.4rem; }
}

/* Thème terracotta, brun & blanc */
:root {
  --terracotta-deep: #71311f;
  --terracotta: #a84f32;
  --terracotta-light: #cf7657;
  --terracotta-pale: #f4dfd5;
  --clay: #e9b8a4;
  --brown: #3f241c;
  --brown-soft: #765043;
  --cream: #fffaf6;
  --primary: var(--terracotta);
  --green-deep: var(--terracotta-deep);
  --green-primary: var(--terracotta);
  --green-mid: var(--terracotta-light);
  --green-light: var(--terracotta-pale);
  --green-soft: #fdf3ee;
  --green-glow: rgba(168, 79, 50, .24);
  --bs-primary: var(--terracotta);
  --bs-primary-rgb: 168, 79, 50;
}

html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--terracotta-light), var(--terracotta-deep)); }
html { scrollbar-color: var(--terracotta) transparent; }

body.page-bg {
  background-color: #6c3829;
}
.page-overlay {
  background:
    radial-gradient(ellipse at 10% 25%, rgba(240, 185, 159, .36), transparent 47%),
    radial-gradient(ellipse at 90% 72%, rgba(103, 47, 31, .54), transparent 52%),
    linear-gradient(90deg, rgba(58, 29, 21, .78), rgba(255, 250, 246, .24) 18%, rgba(255, 250, 246, .57) 50%, rgba(255, 250, 246, .24) 82%, rgba(58, 29, 21, .78));
}
.floating-petal {
  background: linear-gradient(145deg, #fffdfa, #efbba7 50%, #b6583a 100%);
  filter: drop-shadow(0 2px 4px rgba(87, 39, 25, .25));
}
.ambient-bokeh span:nth-child(even) { background: radial-gradient(circle, rgba(207, 118, 87, .3), transparent 70%); }

.invitation-info {
  background:
    radial-gradient(ellipse at 0 0, rgba(244, 223, 213, .9), transparent 42%),
    radial-gradient(ellipse at 100% 100%, rgba(233, 184, 164, .42), transparent 43%),
    linear-gradient(160deg, #fff 0%, var(--cream) 50%, #f9e9e1 100%);
  border-color: rgba(168, 79, 50, .34);
}
.invitation-info::before { background: linear-gradient(90deg, var(--terracotta-deep), var(--terracotta-light), #fff, var(--clay), var(--terracotta), var(--terracotta-light), var(--terracotta-deep)); }
.invitation-info::after { background-image: radial-gradient(rgba(168, 79, 50, .06) 1px, transparent 1px); }
.card-ornament {
  background:
    linear-gradient(135deg, var(--terracotta-light) 2px, transparent 2px) 0 0 / 16px 16px no-repeat,
    linear-gradient(225deg, var(--terracotta) 2px, transparent 2px) 100% 0 / 16px 16px no-repeat,
    linear-gradient(315deg, var(--terracotta-light) 2px, transparent 2px) 100% 100% / 16px 16px no-repeat,
    linear-gradient(45deg, var(--terracotta) 2px, transparent 2px) 0 100% / 16px 16px no-repeat;
}

.hero-banner {
  background:
    radial-gradient(ellipse at 50% 26%, rgba(207, 118, 87, .22), transparent 54%),
    radial-gradient(ellipse at 50% 72%, rgba(255, 255, 255, .82), transparent 65%),
    linear-gradient(180deg, #fff 0%, #f8e5dc 100%);
}
.hero-mosque { color: var(--terracotta); }
.hero-banner-bg .rings { filter: drop-shadow(0 16px 40px rgba(113, 49, 31, .3)) drop-shadow(0 0 55px rgba(255, 255, 255, .8)); }
.hero-banner-bg .rings-glow { background: radial-gradient(circle, rgba(207, 118, 87, .42), rgba(168, 79, 50, .11) 45%, transparent 72%); }
.hero-title {
  border-color: rgba(168, 79, 50, .34);
  box-shadow: 0 14px 42px rgba(113, 49, 31, .11), 0 0 0 1px #fff inset;
}
.hero-name, .hero-name--bride { color: var(--terracotta-deep) !important; -webkit-text-fill-color: var(--terracotta-deep) !important; }
.hero-banner .hero-amp, .hero-amp { color: var(--terracotta-light); }
.hero-bismillah, .hero-date-line { color: var(--terracotta-deep); }
.hero-families span { color: var(--terracotta); }
.hero-date { border-color: rgba(168, 79, 50, .38); }

.countdown, .countdown-item { border-color: rgba(168, 79, 50, .28); }
.countdown-num, .program-event, .invitation-closing { color: var(--terracotta-deep) !important; }
.countdown-sep, .hero-date-dot { color: var(--terracotta-light); }
.section-divider--rose span, .section-divider--green span { color: var(--terracotta); }
.section-divider--rose::before, .section-divider--rose::after, .section-divider--green::before, .section-divider--green::after { background: linear-gradient(90deg, transparent, rgba(168, 79, 50, .45), #fff, transparent); }

.quote-block .quote-section {
  border-color: rgba(168, 79, 50, .22);
  background: linear-gradient(135deg, #fff, #f9e7df);
  box-shadow: 0 5px 22px rgba(113, 49, 31, .07);
}
.quote-block .quote-section::before, .quote-block .quote-section::after { color: var(--terracotta-light); }
.quote-text { color: var(--brown); }
.translation { color: var(--terracotta) !important; }

.program-title { background: linear-gradient(135deg, var(--terracotta-deep), var(--terracotta), var(--terracotta-light)); box-shadow: 0 9px 28px rgba(113, 49, 31, .28); }
.program h3.program-event,
.program h3.program-event.program-event-reception {
  color: #fff !important;
  background: linear-gradient(135deg, var(--brown), var(--terracotta-deep)) !important;
  box-shadow: 0 8px 22px rgba(63, 36, 28, .28);
}
.program-card { border-color: rgba(168, 79, 50, .22); background: linear-gradient(145deg, #fff, #fdf1ec); }
.program-card:hover { border-color: rgba(168, 79, 50, .5); box-shadow: 0 15px 34px rgba(113, 49, 31, .13); }
.program-card-icon { color: var(--terracotta); border-color: rgba(168, 79, 50, .32); background: linear-gradient(135deg, #fff, var(--terracotta-pale)); }
.program-card-icon--mosque { color: var(--terracotta-deep); }
.program-card-icon img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Les deux symboles du mariage religieux (mosquée et réception) ne doivent
   pas se superposer : ils sont disposés côte à côte dans l'angle de la carte. */
.program-card-icon--assiete {
  right: 14px;
}

.program-card-icon--mosque {
  right: 56px;
}

@media (max-width: 480px) {
  .program-card-icon--assiete {
    right: 14px;
  }

  .program-card-icon--mosque {
    right: 54px;
  }
}
.home-item { border-left-color: var(--terracotta-light); }
.mosque-item { border-left-color: var(--terracotta-deep); }
.reception-item { border-left-color: var(--terracotta); }
.program-day, .program-place { color: var(--brown-soft); }

.call-btn, .btn-primary { background: linear-gradient(135deg, var(--terracotta-deep), var(--terracotta)) !important; border-color: var(--terracotta-deep) !important; box-shadow: 0 6px 20px rgba(113, 49, 31, .25); }
.whatsapp-btn { background: var(--terracotta-light) !important; border-color: var(--terracotta-light) !important; box-shadow: 0 6px 20px rgba(168, 79, 50, .2); }
.credit-name { color: var(--terracotta) !important; }

.loader { background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.25), transparent 55%), linear-gradient(145deg, #48251c, var(--terracotta-deep), var(--terracotta-light)); }
.loader-orbit { border-top-color: rgba(255, 255, 255, .9); border-right-color: rgba(244, 223, 213, .65); }

@media (max-width: 768px) {
  .hero-banner-bg .rings { opacity: .27; }
  .program-card { box-shadow: 0 8px 24px rgba(113, 49, 31, .06); }
}

/* Prénoms manuscrits, inspirés de l'écriture de la référence. */
.hero-name,
.hero-name--bride {
  font-family: 'Great Vibes', 'Freestyle Script', cursive !important;
  font-size: clamp(3.1rem, 11vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-transform: none;
}

.hero-title {
  gap: 0.15rem;
  padding-block: 1.35rem;
}

.hero-amp {
  font-size: clamp(2.5rem, 9vw, 3.7rem);
  line-height: 0.75;
}

/* Intitulés du programme : une sérif raffinée, lisible même sur mobile. */
.program h3.program-event,
.program h3.program-event.program-event-reception {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.18;
  text-transform: none;
}

@media (max-width: 480px) {
  .program h3.program-event,
  .program h3.program-event.program-event-reception {
    font-size: 1.32rem;
    line-height: 1.2;
  }
}

/* Sur téléphone, l'image reste ancrée au viewport et demeure visible autour
   de la carte, tout en préservant un fond suffisamment clair pour le texte. */
@media (max-width: 768px) {
  body.page-bg {
    background-color: #6c3829;
    background-image: none;
  }

  .page-overlay {
    background-image:
      linear-gradient(180deg, rgba(72, 30, 21, 0.18), rgba(255, 247, 242, 0.12)),
      url('../img/background.avif');
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
  }

  .invitation-container {
    width: min(calc(100% - 2.25rem), 42rem);
  }

  .invitation-card {
    box-shadow: 0 14px 32px rgba(63, 36, 28, 0.24);
  }

  .invitation-info {
    background:
      radial-gradient(ellipse at 0 0, rgba(244, 223, 213, 0.78), transparent 44%),
      radial-gradient(ellipse at 100% 100%, rgba(233, 184, 164, 0.30), transparent 43%),
      linear-gradient(160deg, rgba(255, 255, 255, 0.90), rgba(255, 250, 246, 0.88) 50%, rgba(249, 233, 225, 0.86));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}