/**
 * TCF INVITATION EMOTIONAL — Styles des messages émotionnels
 * 
 * Responsabilité: Styles des messages émotionnels
 * Tous les backgrounds utilisent --tch-primary (couleur du mariage)
 */

/* ═════════════════════════════════════════════════════════════════════════════
   EMOTIONAL TOAST — Message au bas de l'écran
   ═════════════════════════════════════════════════════════════════════════════ */

.emotional-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.emotional-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.emotional-toast__text {
  display: block;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent),
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, transparent)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--tch-bg, #FFF7EA);
  padding: 18px 36px;
  border-radius: 50px;
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  box-shadow:
    0 10px 40px color-mix(in srgb, var(--tch-primary, #1E2A5A) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tch-accent, #C6A15B) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .emotional-toast__text {
    font-size: 0.95rem;
    padding: 14px 24px;
    white-space: normal;
    max-width: 85vw;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   EMOTIONAL BADGE — Badge en haut de l'écran
   ═════════════════════════════════════════════════════════════════════════════ */

.emotional-badge {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent),
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, transparent)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 28px;
  border-radius: 50px;
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--tch-primary, #1E2A5A) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tch-accent, #C6A15B) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10001;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emotional-badge.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.emotional-badge__text {
  color: var(--tch-bg, #FFF7EA);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .emotional-badge {
    top: 20px;
    padding: 12px 20px;
  }
  .emotional-badge__text {
    font-size: 0.85rem;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   EMOTIONAL SECRET — Message secret centré
   ═════════════════════════════════════════════════════════════════════════════ */

.emotional-secret {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 10002;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emotional-secret.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.emotional-secret__text {
  display: block;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent),
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, transparent)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--tch-bg, #FFF7EA);
  padding: 24px 48px;
  border-radius: 50px;
  font-size: 1.8rem;
  font-weight: 700;
  box-shadow:
    0 20px 60px color-mix(in srgb, var(--tch-primary, #1E2A5A) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tch-accent, #C6A15B) 30%, transparent);
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .emotional-secret__text {
    font-size: 1.4rem;
    padding: 20px 36px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SCROLL MILESTONE TOAST — Toast de progression de scroll
   ═════════════════════════════════════════════════════════════════════════════ */

.scroll-milestone-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, transparent),
    color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, transparent)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--tch-accent, #C6A15B) 30%, transparent);
  border-radius: 50px;
  padding: 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--tch-bg, #FFF7EA);
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-milestone-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.scroll-milestone-progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.scroll-milestone-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--tch-accent, #C6A15B),
    color-mix(in srgb, var(--tch-accent, #C6A15B) 70%, #fff)
  );
  border-radius: 2px;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .scroll-milestone-toast {
    bottom: 80px;
    padding: 12px 20px;
    font-size: 0.8rem;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PREFERS REDUCED MOTION — Respect des préférences
   ═════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .emotional-toast,
  .emotional-badge,
  .emotional-secret,
  .scroll-milestone-toast {
    transition: opacity 0.2s ease !important;
  }
}

/* =============================================================================
   INVITATION REFERRAL — Section parrainage mutualisée (tous thèmes)
   =============================================================================
   Cf. templates/invitation/_partials/_referral_section.html.twig
   Cf. documentation/frameworks-copywriting-tchefon.md (AIDA + 4Us)
   Cf. documentation/carnegie-conversion.md (P3, P19, P25, P26, P28)

   Adaptation aux couleurs du mariage : les variables --wedding-primary,
   --wedding-accent et --wedding-bg sont injectées dynamiquement par
   public/assets/js/invitation.js depuis data-wedding-colors. Si le couple
   n'a pas défini ses couleurs, on retombe sur la palette Tchefon (--tch-*).

   Le bloc reste sobre — pas d'animation tape-à-l'œil, juste un reveal
   au scroll cohérent avec data-reveal du thème parent. Carnegie §8.2 :
   aucune pression artificielle, aucun timer.
   ============================================================================= */

.referral-section {
    padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 2rem);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 12%, transparent),
        transparent 80%
    );
    display: flex;
    justify-content: center;
}

.referral-section__card {
    width: min(640px, 100%);
    background: color-mix(in srgb, var(--wedding-bg, var(--tch-bg, #FFF7EA)) 96%, var(--wedding-accent, var(--tch-accent, #C6A15B)));
    border: 1px solid color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 35%, transparent);
    border-radius: 18px;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 25%, transparent) inset,
        0 24px 60px -28px color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 35%, transparent);
}

.referral-section__eyebrow {
    display: block;
    font-family: var(--font-body, "Inter", "Source Sans Pro", sans-serif);
    font-size: clamp(0.72rem, 2vw, 0.82rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 90%, var(--wedding-primary, var(--tch-primary, #1E2A5A)));
    margin-bottom: 1.25rem;
}

.referral-section__title {
    font-family: var(--font-display, "Cormorant Garamond", "Playfair Display", serif);
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--wedding-primary, var(--tch-primary, #1E2A5A));
    margin: 0 0 1.5rem 0;
}

.referral-section__title em {
    font-style: italic;
    color: color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 80%, var(--wedding-primary, var(--tch-primary, #1E2A5A)));
}

.referral-section__lede {
    font-family: var(--font-body, "Inter", "Source Sans Pro", sans-serif);
    font-size: clamp(0.95rem, 2.6vw, 1.05rem);
    line-height: 1.65;
    color: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 80%, transparent);
    font-style: italic;
    margin: 0 0 2rem 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bloc nom de parrainage — Le nom est mis en scène comme un objet précieux
   (Carnegie P20 dramatiser, P28 belle réputation à mériter pour le couple
   parrain). Aucun montant affiché (cf. carnegie-conversion §8.1, sincérité
   préservée car l'avantage existe bien en BDD via discountForReferred).

   Hiérarchie visuelle :
     1. Filet décoratif (flourish) — délimitation chaleureuse, pas mécanique.
     2. Eyebrow d'attribution — « Le clin d'œil de Tinho & Tina ».
     3. Le NOM — point focal, grand serif avec letter-spacing aéré, halo doux.
     4. Hint conversationnel — « leur geste s'invite chez vous ».
     5. Filet décoratif de clôture.
   ───────────────────────────────────────────────────────────────────────────── */
.referral-section__token {
    background:
        radial-gradient(ellipse at 50% 0%,
            color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 12%, transparent) 0%,
            transparent 70%
        ),
        color-mix(in srgb, var(--wedding-bg, var(--tch-bg, #FFF7EA)) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 28%, transparent);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.5rem;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 20%, transparent);
}

/* Filet décoratif horizontal — entoure le code, signature du soin Tchefon
   (cf. UX.md « le luxe se ressent » : pas de gold-burst tape-à-l'œil,
   juste un filet fin qui respire). */
.referral-section__token-flourish {
    width: 56px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 70%, transparent) 50%,
        transparent 100%
    );
    position: relative;
}

.referral-section__token-flourish::before {
    content: "❖";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 80%, transparent);
    font-size: 0.7rem;
    background: color-mix(in srgb, var(--wedding-bg, var(--tch-bg, #FFF7EA)) 92%, transparent);
    padding: 0 8px;
    line-height: 1;
}

.referral-section__token-label {
    font-family: var(--font-body, "Inter", "Source Sans Pro", sans-serif);
    font-size: clamp(0.78rem, 2.1vw, 0.88rem);
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 70%, transparent);
    font-style: italic;
    text-align: center;
    margin: 0.25rem 0 0.4rem 0;
}

.referral-section__token-code {
    font-family: var(--font-display, "Cormorant Garamond", "Playfair Display", serif);
    font-size: clamp(2.1rem, 7.5vw, 3.2rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.05;
    color: var(--wedding-primary, var(--tch-primary, #1E2A5A));
    text-shadow:
        0 1px 0 color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 18%, transparent),
        0 0 24px color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 14%, transparent);
    padding: 0.25rem 0.5rem;
    user-select: all;
    text-align: center;
    /* Décalage du letter-spacing à droite pour compenser l'optique du dernier
       caractère, sinon le bloc paraît visuellement décalé à gauche. */
    text-indent: 0.22em;
}

.referral-section__token-hint {
    font-family: var(--font-body, "Inter", "Source Sans Pro", sans-serif);
    font-size: clamp(0.85rem, 2.3vw, 0.95rem);
    line-height: 1.55;
    color: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 72%, transparent);
    margin-top: 0.4rem;
    font-style: italic;
    text-align: center;
    max-width: 38ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CTA — Bouton vers la landing avec voie de sortie implicite. Carnegie P25
   (question plutôt qu'ordre — déjà dans le lede), P30 (récompense évoquée).
   ───────────────────────────────────────────────────────────────────────────── */
/* CTA aligné sur le langage visuel des boutons d'invitation des thèmes
   (cf. splash tinhoetina « OUVRIR MON INVITATION » : fond velours primaire +
   texte/bordure or fin + pill uppercase). L'or sert uniquement d'accent
   (cf. UX.md « Or : uniquement pour les accents dopaminergiques »), pas de
   fond plein moutarde. Plus sobre, plus chaleureux. */
.referral-section__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--wedding-primary, var(--tch-primary, #1E2A5A));
    color: var(--wedding-accent, var(--tch-accent, #C6A15B));
    border: 1px solid color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 65%, transparent);
    font-family: var(--font-body, "Inter", "Source Sans Pro", sans-serif);
    font-size: clamp(0.82rem, 2.3vw, 0.92rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.95rem 2.1rem;
    border-radius: 999px;
    text-decoration: none;
    /* cursor: pointer explicite + user-select: none pour éviter que le navigateur
       hérite du cursor: text ou du user-select: all du code voisin lors d'un
       drag de sélection qui passerait au-dessus du bouton. */
    cursor: pointer;
    user-select: none;
    box-shadow:
        0 14px 36px -18px color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 70%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 18%, transparent);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
                background 220ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.referral-section__cta * {
    cursor: pointer;
}

.referral-section__cta:hover,
.referral-section__cta:focus-visible {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 88%, var(--wedding-accent, var(--tch-accent, #C6A15B)));
    border-color: color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 90%, transparent);
    box-shadow:
        0 20px 48px -16px color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 80%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 35%, transparent);
}

.referral-section__cta:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--wedding-accent, var(--tch-accent, #C6A15B)) 80%, transparent);
    outline-offset: 4px;
}

.referral-section__cta-icon {
    display: inline-flex;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.referral-section__cta:hover .referral-section__cta-icon,
.referral-section__cta:focus-visible .referral-section__cta-icon {
    transform: translateX(3px);
}

.referral-section__fineprint {
    font-family: var(--font-body, "Inter", "Source Sans Pro", sans-serif);
    font-size: clamp(0.78rem, 2vw, 0.85rem);
    line-height: 1.5;
    color: color-mix(in srgb, var(--wedding-primary, var(--tch-primary, #1E2A5A)) 55%, transparent);
    margin: 1.5rem 0 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reveal au scroll — cohérent avec data-reveal des autres sections de thème.
   Le JS de chaque thème ajoute la classe .is-revealed quand l'élément entre
   dans le viewport ; on prépare l'état initial et la transition ici.
   Respect prefers-reduced-motion (UX.md §4).
   ───────────────────────────────────────────────────────────────────────────── */
.referral-section[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.referral-section[data-reveal].is-revealed,
.referral-section[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .referral-section[data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .referral-section__cta {
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile — padding latéral resserré, gouttière de respiration en bas.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .referral-section__card {
        border-radius: 14px;
    }
    .referral-section__token {
        padding: 1rem 1.1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   INTÉGRATION THÉMATIQUE — Remappe les variables --wedding-* du partial vers
   les palettes natives de chaque thème lorsque le couple n'a pas configuré
   ses propres couleurs. Si data-wedding-colors est défini, le JS inline les
   --wedding-* via style attr, ce qui prend précédence sur ces overrides
   (CSS specificity : inline > class selector).

   Cascade de fallback effective :
     1. Couleurs du couple (style inline injecté par invitation.js).
     2. Palette du thème actif (ces overrides).
     3. Palette Tchefon par défaut (fallback dans var() des règles).
   ───────────────────────────────────────────────────────────────────────────── */

/* TINHOETTINA — Velours bordeaux + parchemin crème + or doux.
   Le hero du thème utilise un cartouche or à 2 niveaux (filet fin + halo or
   plus large) via box-shadow inset. On reproduit ce langage sur la card du
   parrainage pour qu'elle évoque un vrai carton d'invitation imprimé. */
body.theme-tinhoetina-page .referral-section {
    --wedding-primary: var(--tt-quill-ink, var(--tch-primary, #1E2A5A));
    --wedding-accent: var(--tt-gold-dark, var(--tch-accent, #C6A15B));
    --wedding-bg: var(--tt-parchment, var(--tch-bg, #FFF7EA));
}

body.theme-tinhoetina-page .referral-section__card {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--tt-gold, #C9A24A) 65%, transparent);
    border-radius: 6px;
    box-shadow:
        inset 0 0 0 7px color-mix(in srgb, var(--tt-gold, #C9A24A) 14%, transparent),
        0 24px 60px -28px color-mix(in srgb, var(--tt-velvet-1, #4A0815) 65%, transparent);
    padding: clamp(2.5rem, 6vw, 3.5rem) clamp(2rem, 5vw, 3rem);
}

/* Bloc nom de parrainage — bordure pleine or au lieu de dashed, plus
   cohérent avec le langage graphique du carton d'invitation. */
body.theme-tinhoetina-page .referral-section__token {
    border-style: solid;
    border-color: color-mix(in srgb, var(--tt-gold, #C9A24A) 45%, transparent);
}

/* CTA en OR plein — même langage que les autres boutons principaux du thème
   (« Ouvrir mon invitation », « Laisser un mot »). Le défaut sombre
   (--wedding-primary) ne convient pas au registre doré de tinhoetina. */
body.theme-tinhoetina-page .referral-section__cta {
    background: linear-gradient(135deg,
        var(--tt-gold-light, #E6C875) 0%,
        var(--tt-gold, #C9A24A) 55%,
        var(--tt-gold-dark, #8C6B22) 100%);
    color: var(--tt-velvet-1, #4A0815);
    border-color: color-mix(in srgb, var(--tt-gold-dark, #8C6B22) 75%, #000);
    box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--tt-gold-dark, #8C6B22) 70%, transparent);
}
body.theme-tinhoetina-page .referral-section__cta:hover,
body.theme-tinhoetina-page .referral-section__cta:focus-visible {
    background: linear-gradient(135deg,
        var(--tt-gold-light, #E6C875) 0%,
        var(--tt-gold-light, #E6C875) 45%,
        var(--tt-gold, #C9A24A) 100%);
    border-color: var(--tt-gold, #C9A24A);
    color: var(--tt-velvet-1, #4A0815);
}

/* ─────────────────────────────────────────────────────────────────────────────
   COINS ORNÉS ART DÉCO — Équivalent CSS pur du motif SVG .tt-frame__corner
   du hero tinhoetina. Quatre angles en L tracés par bordures partielles,
   masqués par défaut et activés uniquement sur les thèmes qui en bénéficient.
   ───────────────────────────────────────────────────────────────────────────── */
.referral-section__corner {
    display: none;
}

body.theme-tinhoetina-page .referral-section__corner {
    display: block;
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid var(--tt-gold, #C9A24A);
    pointer-events: none;
}

body.theme-tinhoetina-page .referral-section__corner--tl {
    top: 14px;
    left: 14px;
    border-right: none;
    border-bottom: none;
}

body.theme-tinhoetina-page .referral-section__corner--tr {
    top: 14px;
    right: 14px;
    border-left: none;
    border-bottom: none;
}

body.theme-tinhoetina-page .referral-section__corner--bl {
    bottom: 14px;
    left: 14px;
    border-right: none;
    border-top: none;
}

body.theme-tinhoetina-page .referral-section__corner--br {
    bottom: 14px;
    right: 14px;
    border-left: none;
    border-top: none;
}

/* BAOBAB — Terres chaudes savane + or solaire + ciel d'aube */
body.theme-baobab-page .referral-section {
    --wedding-primary: var(--ib-baobab-trunk, var(--tch-primary, #1E2A5A));
    --wedding-accent: var(--ib-gold-ray, var(--tch-accent, #C6A15B));
    --wedding-bg: var(--ib-sky-noon, var(--tch-bg, #FFF7EA));
}

/* ROYAL — Indigo nuit + velours bordeaux + or massif (les variables Tchefon
   sont déjà overridées au niveau de la page royal, donc Tchefon-fallback OK). */
body.theme-royal-page .referral-section {
    --wedding-primary: var(--ir-velvet-mid, var(--tch-primary, #0a1a3f));
    --wedding-accent: var(--tch-accent, #d4af37);
    --wedding-bg: var(--tch-bg, #f5f0e5);
}

/* SABLIER — Sable ambre + lin ivoire + lueur dorée */
body.theme-sablier-page .referral-section {
    --wedding-primary: var(--sb-amber-deep, var(--tch-primary, #1E2A5A));
    --wedding-accent: var(--sb-amber-mid, var(--tch-accent, #C6A15B));
    --wedding-bg: var(--sb-cream, var(--tch-bg, #FFF7EA));
}

/* Honeypot anti-bot (couche 0) - champ piege masque visuellement, present dans le DOM. */
.tch-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }


/* Message d'erreur correctif RSVP (anti-bot / telephone / email). */
.inv-rsvp__error { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; border-radius: 8px; background: rgba(220,38,38,0.12); color: #fecaca; font-size: 0.9rem; line-height: 1.4; text-align: center; }