/* ═════════════════════════════════════════════════════════════════════════════
   THÈME ROYAL — Direction artistique « Manuscrit enluminé sur velours »
   ────────────────────────────────────────────────────────────────────────────
   Bleu nuit profond rehaussé d'or massif, bordeaux velours, ivoire chaud.
   Typographie : Bodoni Moda (display couture, serifs très contrastés)
                 + Cormorant Garamond (italique, calligraphie, citations)
                 + Inter (body).
   Toutes les règles sont scopées à `.invitation-wrapper` pour ne pas affecter
   les autres thèmes (classique, tropical, tinhoetina).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Typographie — Bodoni Moda + Cormorant Garamond
   Chargées par base.html.twig en preconnect (gain ~80 KB et FCP).
   Pas de @import ici : il bloquerait la cascade CSS le temps du download. */

/* ── 1. Variables couleurs + typographies + easings ───────────────────────── */
/* Variables aussi sur body.theme-royal-page : indispensable pour que les
   overlays attaches a document.body (portail temporel — pattern admin showLoader)
   trouvent --tch-primary / --tch-accent / etc. quand ils sont rendus en dehors
   du wrapper. */
body.theme-royal-page,
.invitation-wrapper {
    /* Palette — bleu nuit royal + or massif + bordeaux velours */
    --tch-primary: #0a1a3f;
    --tch-primary-hover: color-mix(in srgb, var(--tch-primary) 85%, #ffffff);
    --tch-secondary: #5a0e1a; /* Bordeaux velours pour accents secondaires */
    --tch-accent: #d4af37; /* Or massif */
    --tch-accent-hover: color-mix(in srgb, var(--tch-accent) 85%, #000);
    --tch-accent-soft: color-mix(
        in srgb,
        var(--tch-accent) 70%,
        #ffffff
    ); /* Or clair pour glow */
    --tch-bg: #f5f0e5; /* Ivoire chaud */
    --tch-surface: #ffffff;
    --tch-text: var(--tch-primary);
    --tch-text-muted: #5a5f72;
    --tch-purple: color-mix(
        in srgb,
        var(--tch-primary) 60%,
        #3d1b4e
    ); /* Pourpre velours — derive de primary */

    /* Variantes pour gradients velours — DERIVENT DE --tch-primary pour
       suivre automatiquement la surcharge des couleurs du mariage. */
    --ir-velvet-deep: color-mix(in srgb, var(--tch-primary) 80%, #000);
    --ir-velvet-mid: var(--tch-primary);
    --ir-velvet-soft: color-mix(in srgb, var(--tch-primary) 80%, #ffffff);

    /* Typographie royale — couture/joaillerie */
    --inv2-font-title: "Bodoni Moda", "Didot", "Cormorant Garamond", serif;
    --inv2-font-display: "Cormorant Garamond", "Bodoni Moda", serif;
    --inv2-font-script: "Cormorant Garamond", "Bodoni Moda", cursive;
    --inv2-font-body: "Cormorant Garamond", "Inter", serif;

    /* Easings — empruntés au design system Tchefon UX.md §4 */
    --ir-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ir-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ir-ease-in-out: cubic-bezier(0.85, 0, 0.15, 1);
}

/* ── 2. Texture velours du wrapper ────────────────────────────────────────── */
.invitation-wrapper {
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 0%,
            color-mix(in srgb, var(--tch-accent), transparent 90%) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 50% at 50% 100%,
            color-mix(in srgb, var(--tch-secondary), transparent 92%) 0%,
            transparent 70%
        ),
        linear-gradient(
            180deg,
            var(--ir-velvet-mid) 0%,
            var(--ir-velvet-deep) 100%
        );
    color: var(--tch-bg);
}

/* ── 3. Hero — overlay dramatique velours ─────────────────────────────────── */
.invitation-wrapper .inv-hero .inv-hero__overlay {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tch-primary) 55%, transparent) 0%,
        color-mix(in srgb, var(--tch-primary) 85%, transparent) 60%,
        color-mix(in srgb, var(--ir-velvet-deep) 97%, transparent) 100%
    );
}

/* ── 4. Titres or sur fond velours — hiérarchie émotionnelle UX.md ────────── */
.invitation-wrapper .inv-hero__names,
.invitation-wrapper .inv2-hero__names {
    font-family: var(--inv2-font-display);
    color: var(--tch-accent);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-shadow:
        0 2px 24px color-mix(in srgb, var(--tch-accent) 35%, transparent),
        0 0 60px color-mix(in srgb, var(--tch-accent) 18%, transparent);
}

.invitation-wrapper .inv-hero__badge {
    background: color-mix(in srgb, var(--tch-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 60%, transparent);
    color: var(--tch-accent);
    letter-spacing: 0.16em;
    font-family: var(--inv2-font-title);
    font-weight: 500;
}

/* ── 5. Pétales dorés ─────────────────────────────────────────────────────── */
.invitation-wrapper .petal {
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--tch-accent) 95%, transparent) 0%,
        color-mix(in srgb, var(--tch-accent) 40%, transparent) 60%,
        transparent 70%
    );
}

/* ── 5b. Masquer petales tropicales (residu de show_v2) sur theme royal ─── */
/* Le conteneur #petalsContainer est defini hors de .invitation-wrapper.
   Sur html:has(.invitation-wrapper[data-theme="royal"]) on neutralise totalement pour ne pas polluer
   l'identite royale "manuscrit + ciel etoile". */
html:has(.invitation-wrapper[data-theme="royal"]) .inv-petals-container,
html:has(.invitation-wrapper[data-theme="royal"]) .inv-petals-container *,
html:has(.invitation-wrapper[data-theme="royal"]) .floating-particles,
html:has(.invitation-wrapper[data-theme="royal"]) .floating-particles *,
html:has(.invitation-wrapper[data-theme="royal"]) #petalsContainer,
html:has(.invitation-wrapper[data-theme="royal"]) #petalsContainer *,
/* Canvas JS de petales (curseur + falling) - bitmap dessine via JS */
html:has(.invitation-wrapper[data-theme="royal"]) .cursor-petal-canvas,
html:has(.invitation-wrapper[data-theme="royal"]) .falling-petals-canvas {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ── 6. CTA or massif avec shimmer animé + hover renversement ─────────────── */
.invitation-wrapper .p-cta,
.invitation-wrapper .inv-rsvp__submit,
.invitation-wrapper .magnetic-btn.shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--tch-accent) 0%,
        var(--tch-accent-hover) 100%
    );
    color: var(--tch-primary);
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid color-mix(in srgb, var(--tch-accent), #fff 25%);
    box-shadow:
        0 10px 30px color-mix(in srgb, var(--tch-accent) 32%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition:
        background 0.4s var(--ir-ease-out),
        transform 0.3s var(--ir-ease-spring),
        box-shadow 0.4s var(--ir-ease-out);
}
/* Shimmer or — reflet qui balaye le CTA toutes les 4s */
.invitation-wrapper .p-cta::after,
.invitation-wrapper .inv-rsvp__submit::after,
.invitation-wrapper .magnetic-btn.shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: ir-shimmer-sweep 4.5s var(--ir-ease-out) infinite;
    pointer-events: none;
}
@keyframes ir-shimmer-sweep {
    0% {
        left: -100%;
    }
    60% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}
.invitation-wrapper .p-cta:hover,
.invitation-wrapper .inv-rsvp__submit:hover {
    background: linear-gradient(
        135deg,
        var(--tch-accent-hover) 0%,
        var(--tch-primary) 100%
    );
    color: var(--tch-accent);
    transform: translateY(-2px);
    box-shadow:
        0 14px 42px color-mix(in srgb, var(--tch-accent) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ── 7. Cards bordure or discrète ─────────────────────────────────────────── */
.invitation-wrapper .p-card {
    border: 1px solid color-mix(in srgb, var(--tch-accent) 25%, transparent);
    box-shadow: 0 8px 40px
        color-mix(in srgb, var(--tch-primary) 18%, transparent);
}

/* ═════════════════════════════════════════════════════════════════════════════
   THEME_DECOR — Cartouches d'angle + particules + lis royaux
   ───────────────────────────────────────────────────────────────────────────── */

/* Cartouches dorés aux 4 angles — signature visuelle du thème */
.ir-decor-corner {
    position: fixed;
    width: clamp(60px, 12vw, 100px);
    height: clamp(60px, 12vw, 100px);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: ir-corner-reveal 1.4s var(--ir-ease-out) 0.8s forwards;
    filter: drop-shadow(
        0 0 6px color-mix(in srgb, var(--tch-accent) 25%, transparent)
    );
}
.ir-decor-corner--tl {
    top: 12px;
    left: 12px;
}
.ir-decor-corner--tr {
    top: 12px;
    right: 12px;
}
.ir-decor-corner--bl {
    bottom: 12px;
    left: 12px;
}
.ir-decor-corner--br {
    bottom: 12px;
    right: 12px;
}
.ir-decor-corner svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes ir-corner-reveal {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 0.85;
        transform: scale(1);
    }
}

/* Particules dorées flottantes en arrière-plan */
.ir-decor-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.ir-decor-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--tch-accent);
    opacity: 0;
    animation: ir-particle-drift 12s ease-in-out infinite;
}
.ir-decor-particles span:nth-child(1) {
    left: 6%;
    top: 15%;
    animation-delay: 0s;
}
.ir-decor-particles span:nth-child(2) {
    left: 18%;
    top: 38%;
    animation-delay: 1.4s;
}
.ir-decor-particles span:nth-child(3) {
    left: 32%;
    top: 22%;
    animation-delay: 2.8s;
}
.ir-decor-particles span:nth-child(4) {
    left: 48%;
    top: 8%;
    animation-delay: 4.2s;
}
.ir-decor-particles span:nth-child(5) {
    left: 62%;
    top: 35%;
    animation-delay: 5.6s;
}
.ir-decor-particles span:nth-child(6) {
    left: 78%;
    top: 18%;
    animation-delay: 7s;
}
.ir-decor-particles span:nth-child(7) {
    left: 92%;
    top: 42%;
    animation-delay: 0.8s;
}
.ir-decor-particles span:nth-child(8) {
    left: 14%;
    top: 65%;
    animation-delay: 2.2s;
}
.ir-decor-particles span:nth-child(9) {
    left: 28%;
    top: 82%;
    animation-delay: 3.6s;
}
.ir-decor-particles span:nth-child(10) {
    left: 44%;
    top: 72%;
    animation-delay: 5s;
}
.ir-decor-particles span:nth-child(11) {
    left: 58%;
    top: 88%;
    animation-delay: 6.4s;
}
.ir-decor-particles span:nth-child(12) {
    left: 72%;
    top: 75%;
    animation-delay: 7.8s;
}
.ir-decor-particles span:nth-child(13) {
    left: 86%;
    top: 62%;
    animation-delay: 9.2s;
}
.ir-decor-particles span:nth-child(14) {
    left: 50%;
    top: 50%;
    animation-delay: 10.6s;
}

@keyframes ir-particle-drift {
    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }
    20% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.2);
        box-shadow: 0 0 10px var(--tch-accent);
    }
    80% {
        opacity: 0.4;
    }
}

/* Lis royaux flottants — accent narratif (visible sur grands écrans uniquement) */
.ir-decor-lily {
    position: fixed;
    width: 36px;
    height: 54px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: ir-lily-float 6s ease-in-out infinite;
}
.ir-decor-lily--left {
    left: 2%;
    top: 40%;
    animation-delay: 0s;
}
.ir-decor-lily--right {
    right: 2%;
    top: 55%;
    animation-delay: 3s;
}
.ir-decor-lily svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes ir-lily-float {
    0%,
    100% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px) rotate(8deg);
    }
}

@media (max-width: 768px) {
    .ir-decor-lily {
        display: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   HERO ROYAL — Décret royal proclamé (narration en 6 phases sur 8s)
   Phase 1 (0-1s)   : Trompettes + bannières émergent des coins
   Phase 2 (1-2s)   : Parchemin scellé apparaît en lévitation
   Phase 3 (2-3s)   : Ruban se dénoue (rotation + chute)
   Phase 4 (3-4.5s) : Parchemin se déroule de haut en bas
   Phase 5 (4.5-7s) : Texte solennel s'écrit ligne par ligne
   Phase 6 (7-8s)   : Sceau impérial s'imprime + CTA
   ───────────────────────────────────────────────────────────────────────────── */

.ir-decree-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--ir-velvet-deep);
    color: #f5e9c8;
    font-family: var(--inv2-font-body);
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Mobile-first : contenu en haut juste apres les trompettes, pas centre vertical */
    justify-content: flex-start;
    padding: 100px 14px 50px;
}
.ir-decree-hero *,
.ir-decree-hero *::before,
.ir-decree-hero *::after {
    box-sizing: border-box;
}
/* Tablette/desktop : justify center pour les ecrans plus hauts */
@media (min-width: 768px) {
    .ir-decree-hero {
        justify-content: center;
        padding: 14vh 24px 8vh;
    }
}

/* ── Background velours nocturne + sparkles ─────────────────────────────── */
.ir-decree-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.ir-decree-hero__velvet {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 50% at 50% 30%,
            color-mix(in srgb, var(--tch-secondary) 45%, transparent) 0%,
            transparent 65%
        ),
        radial-gradient(
            ellipse 90% 80% at 50% 100%,
            color-mix(in srgb, var(--tch-purple) 30%, transparent) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 100% 100% at 50% 50%,
            var(--tch-primary) 0%,
            var(--ir-velvet-deep) 80%
        );
}
.ir-decree-hero__sparkles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.ir-decree-hero__sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        #fff8d8 0%,
        var(--tch-accent) 60%,
        transparent 100%
    );
    box-shadow: 0 0 6px color-mix(in srgb, var(--tch-accent) 70%, transparent);
    opacity: 0;
    animation: ir-decree-sparkle 5s ease-in-out infinite;
}
.ir-decree-hero__sparkle:nth-child(1) {
    left: 6%;
    top: 22%;
    animation-delay: 0.2s;
}
.ir-decree-hero__sparkle:nth-child(2) {
    left: 14%;
    top: 48%;
    animation-delay: 0.7s;
}
.ir-decree-hero__sparkle:nth-child(3) {
    left: 22%;
    top: 18%;
    animation-delay: 1.2s;
}
.ir-decree-hero__sparkle:nth-child(4) {
    left: 30%;
    top: 72%;
    animation-delay: 1.7s;
}
.ir-decree-hero__sparkle:nth-child(5) {
    left: 42%;
    top: 38%;
    animation-delay: 2.2s;
}
.ir-decree-hero__sparkle:nth-child(6) {
    left: 50%;
    top: 14%;
    animation-delay: 2.7s;
}
.ir-decree-hero__sparkle:nth-child(7) {
    left: 58%;
    top: 58%;
    animation-delay: 3.2s;
}
.ir-decree-hero__sparkle:nth-child(8) {
    left: 66%;
    top: 28%;
    animation-delay: 3.7s;
}
.ir-decree-hero__sparkle:nth-child(9) {
    left: 74%;
    top: 78%;
    animation-delay: 4.2s;
}
.ir-decree-hero__sparkle:nth-child(10) {
    left: 82%;
    top: 42%;
    animation-delay: 0.5s;
}
.ir-decree-hero__sparkle:nth-child(11) {
    left: 90%;
    top: 20%;
    animation-delay: 1s;
}
.ir-decree-hero__sparkle:nth-child(12) {
    left: 96%;
    top: 64%;
    animation-delay: 1.5s;
}
.ir-decree-hero__sparkle:nth-child(13) {
    left: 18%;
    top: 88%;
    animation-delay: 2s;
}
.ir-decree-hero__sparkle:nth-child(14) {
    left: 78%;
    top: 92%;
    animation-delay: 3.5s;
}
@keyframes ir-decree-sparkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* ── Bouton rejouer (haut droite) ──────────────────────────────────────── */
.ir-decree-hero__replay {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--tch-primary) 60%, transparent);
    color: var(--tch-accent);
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--tch-accent) 50%, transparent);
    border-radius: 24px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition:
        background 0.3s,
        color 0.3s,
        transform 0.3s;
    opacity: 0;
    animation: ir-decree-fade 0.5s ease-out 7.8s forwards;
}
.ir-decree-hero__replay svg {
    width: 12px;
    height: 12px;
}
.ir-decree-hero__replay:hover {
    background: color-mix(in srgb, var(--tch-accent) 90%, transparent);
    color: var(--tch-primary);
    transform: rotate(-360deg) scale(1.05);
}
@media (max-width: 540px) {
    .ir-decree-hero__replay {
        top: 14px;
        right: 14px;
        padding: 6px 10px;
    }
    .ir-decree-hero__replay-label {
        display: none;
    }
}
@keyframes ir-decree-fade {
    to {
        opacity: 1;
    }
}

/* ── PHASE 1 : Trompettes + bannières (coins supérieurs) ──────────────── */
.ir-decree-hero__fanfare {
    position: absolute;
    /* Mobile-first : compactes, top juste sous le bandeau demo */
    top: 24px;
    width: 64px;
    z-index: 3;
    filter: drop-shadow(
            0 0 12px color-mix(in srgb, var(--tch-accent) 50%, transparent)
        )
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    opacity: 0;
    transform: translateY(-30px) rotate(-12deg);
    animation: ir-decree-fanfare-arrive 0.9s var(--ir-ease-spring) 0.2s forwards;
}
@media (min-width: 768px) {
    .ir-decree-hero__fanfare {
        top: 4vh;
        width: clamp(110px, 22vw, 180px);
    }
}
.ir-decree-hero__fanfare--left {
    left: 10px;
}
.ir-decree-hero__fanfare--right {
    right: 10px;
    transform: translateY(-30px) rotate(12deg);
}
@media (min-width: 768px) {
    .ir-decree-hero__fanfare--left {
        left: 2vw;
    }
    .ir-decree-hero__fanfare--right {
        right: 2vw;
    }
}
.ir-decree-hero__fanfare svg {
    width: 100%;
    height: auto;
    display: block;
}
@keyframes ir-decree-fanfare-arrive {
    0% {
        opacity: 0;
        transform: translateY(-30px) rotate(-12deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-4deg);
    }
}
.ir-decree-hero__fanfare--right {
    animation-name: ir-decree-fanfare-arrive-right;
}
@keyframes ir-decree-fanfare-arrive-right {
    0% {
        opacity: 0;
        transform: translateY(-30px) rotate(12deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(4deg);
    }
}

/* Bannière qui ondule légèrement */
.ir-decree-hero__banner {
    transform-origin: top center;
    animation: ir-decree-banner-wave 4s ease-in-out infinite 1s;
}
@keyframes ir-decree-banner-wave {
    0%,
    100% {
        transform: skewX(0deg);
    }
    50% {
        transform: skewX(-3deg);
    }
}

/* Ondes sonores qui partent de la trompette */
.ir-decree-hero__wave {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    opacity: 0;
    animation: ir-decree-wave-emit 2s ease-out infinite;
}
.ir-decree-hero__wave--1 {
    animation-delay: 1s;
}
.ir-decree-hero__wave--2 {
    animation-delay: 1.3s;
}
.ir-decree-hero__wave--3 {
    animation-delay: 1.6s;
}
@keyframes ir-decree-wave-emit {
    0% {
        stroke-dashoffset: 30;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* ── PHASE 2-4 : Parchemin scellé ─────────────────────────────────────── */
.ir-decree-hero__scroll-wrap {
    position: relative;
    z-index: 4;
    width: min(100%, 580px);
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    animation: ir-decree-scroll-arrive 0.9s var(--ir-ease-out) 1s forwards;
}
@keyframes ir-decree-scroll-arrive {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rouleaux haut et bas (bois + ferrure or) */
.ir-decree-hero__rod {
    position: relative;
    height: 18px;
    background: linear-gradient(
        180deg,
        var(--tch-accent-hover) 0%,
        var(--tch-accent) 30%,
        var(--tch-accent-hover) 60%,
        #8c6b22 100%
    );
    border-radius: 4px 4px 0 0;
    box-shadow:
        inset 0 -3px 6px rgba(0, 0, 0, 0.4),
        inset 0 2px 3px rgba(255, 255, 255, 0.25),
        0 -2px 8px color-mix(in srgb, var(--tch-accent) 30%, transparent);
}
.ir-decree-hero__rod--bottom {
    border-radius: 0 0 4px 4px;
}
.ir-decree-hero__rod::before,
.ir-decree-hero__rod::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(
        180deg,
        var(--tch-accent-soft) 0%,
        var(--tch-accent) 50%,
        #8c6b22 100%
    );
    border-radius: 6px;
}
.ir-decree-hero__rod::before {
    left: -8px;
}
.ir-decree-hero__rod::after {
    right: -8px;
}

/* PHASE 3 : Ruban de soie bordeaux qui se dénoue */
.ir-decree-hero__ribbon {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 30px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    animation:
        ir-decree-fade 0.4s ease-out 1.3s forwards,
        ir-decree-ribbon-untie 0.8s var(--ir-ease-in-out) 2s forwards;
}
.ir-decree-hero__ribbon-left,
.ir-decree-hero__ribbon-right {
    position: absolute;
    top: 8px;
    width: 50%;
    height: 14px;
    /* Fanion bordeaux velours — couleur composite qui reste sombre quelle que
       soit la palette mariage. Si le couple definit son accent (ex. or pur) en
       role secondary, on evite que les fanions deviennent jaune sur jaune. */
    background: linear-gradient(
        180deg,
        #9a2638 0%,
        color-mix(in srgb, var(--tch-primary) 60%, #5a0e1a) 50%,
        #3a0810 100%
    );
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.ir-decree-hero__ribbon-left {
    left: 0;
    border-radius: 4px 0 0 4px;
}
.ir-decree-hero__ribbon-right {
    right: 0;
    border-radius: 0 4px 4px 0;
}
.ir-decree-hero__ribbon-knot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 30px;
    /* Nœud bordeaux velours stable — cf. notes sur .ir-decree-hero__ribbon-left. */
    background: radial-gradient(
        ellipse at 50% 40%,
        #9a2638 0%,
        color-mix(in srgb, var(--tch-primary) 60%, #5a0e1a) 80%
    );
    border-radius: 50%;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 40%, transparent),
        0 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
@keyframes ir-decree-ribbon-untie {
    0% {
        transform: translateX(-50%) scaleY(1) rotate(0);
        opacity: 1;
    }
    60% {
        transform: translateX(-50%) scaleY(0.85) rotate(-3deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scaleY(0) translateY(40px) rotate(-12deg);
        opacity: 0;
    }
}

/* PHASE 4 : Parchemin qui se déroule */
.ir-decree-hero__parchment {
    position: relative;
    padding: 36px 32px 56px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.20 0 0 0 0.15 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
        radial-gradient(
            ellipse 14% 9% at 22% 28%,
            rgba(120, 80, 30, 0.08) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 10% 7% at 76% 70%,
            rgba(120, 80, 30, 0.06) 0%,
            transparent 70%
        ),
        linear-gradient(180deg, #f5e8c9 0%, #e8d9b0 50%, #dcc899 100%);
    border: 1px solid rgba(184, 150, 46, 0.5);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 60px 120px -20px rgba(0, 0, 0, 0.4),
        inset 0 0 80px rgba(139, 90, 30, 0.18);
    text-align: center;
    color: #3d2817;
    /* Animation deroulement : clip-path inset top a 100% qui descend a 0 */
    clip-path: inset(0 0 100% 0);
    animation: ir-decree-parchment-unfurl 1.5s var(--ir-ease-out) 2.8s forwards;
}
@keyframes ir-decree-parchment-unfurl {
    0% {
        clip-path: inset(0 0 100% 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* ── PHASE 5 : Texte solennel ligne par ligne ─────────────────────────── */
[data-decree-line] {
    opacity: 0;
    transform: translateY(12px);
    animation: ir-decree-line-write 0.6s var(--ir-ease-out) forwards;
}
[data-decree-line="1"] {
    animation-delay: 4.3s;
}
[data-decree-line="2"] {
    animation-delay: 4.7s;
}
[data-decree-line="3"] {
    animation-delay: 5s;
}
[data-decree-line="4"] {
    animation-delay: 5.7s;
}
[data-decree-line="5"] {
    animation-delay: 6.3s;
}
@keyframes ir-decree-line-write {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ir-decree-hero__addressee {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.9rem, 2.4vw, 1rem);
    color: #6b4a1f;
    margin: 0 0 18px;
    opacity: 0;
    animation: ir-decree-line-write 0.6s var(--ir-ease-out) 4s forwards;
}
.ir-decree-hero__addressee strong {
    color: var(--tch-secondary);
    font-weight: 600;
}

.ir-decree-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 22px;
}
.ir-decree-hero__eyebrow-line {
    display: block;
    width: 36px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--tch-accent-hover),
        transparent
    );
}
.ir-decree-hero__eyebrow-text {
    font-family: var(--inv2-font-title);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #8c6b22;
    padding-left: 0.38em;
}

.ir-decree-hero__intro {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.15rem);
    color: #5a3a0e;
    margin: 0 0 4px;
}

.ir-decree-hero__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2rem, 6.5vw, 3.4rem);
    line-height: 1.05;
    /* --tch-primary garantit un contraste sombre sur parchemin clair quelle que
       soit la palette mariage. Avec --tch-secondary, un couple ayant defini
       son or en role "secondary" (cas Tinho & Tina) obtenait un titre jaune
       illisible sur creme. */
    color: var(--tch-primary);
    margin: 0 0 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ir-decree-hero__declaration {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    line-height: 1.7;
    color: #3d2817;
    margin: 0 0 18px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
.ir-decree-hero__declaration-strong {
    font-family: var(--inv2-font-display);
    font-style: normal;
    font-weight: 600;
    /* Meme couleur que le nom du couple (--tch-primary) pour garantir un
       contraste sombre sur le parchemin clair quelle que soit la palette
       du mariage. Avec --tch-secondary, le couple ayant defini son or en
       role "secondary" obtenait des lignes jaunes illisibles sur creme. */
    color: var(--tch-primary);
}

.ir-decree-hero__welcome {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.9rem, 2.3vw, 1rem);
    line-height: 1.55;
    color: #6b4a1f;
    max-width: 420px;
    margin: 0 auto 32px;
}

/* ── PHASE 6 : Sceau impérial qui s'imprime ───────────────────────────── */
.ir-decree-hero__seal {
    position: relative;
    margin: 8px auto 0;
    width: clamp(80px, 18vw, 110px);
    height: clamp(80px, 18vw, 110px);
    filter: drop-shadow(0 4px 12px rgba(58, 8, 16, 0.6));
    opacity: 0;
    transform: scale(2) rotate(-15deg);
    animation: ir-decree-seal-press 0.7s var(--ir-ease-spring) 7s forwards;
}
.ir-decree-hero__seal svg {
    width: 100%;
    height: 100%;
    display: block;
}
@keyframes ir-decree-seal-press {
    0% {
        opacity: 0;
        transform: scale(2) rotate(-15deg);
    }
    60% {
        opacity: 1;
        transform: scale(0.92) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Eclaboussure de cire autour du sceau (4 petits points qui s'echappent) */
.ir-decree-hero__seal-splash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    animation: ir-decree-splash 0.5s ease-out 7.1s forwards;
    background:
        radial-gradient(
            circle 4px at 8% 22%,
            var(--tch-secondary) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle 3px at 92% 18%,
            var(--tch-secondary) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle 5px at 14% 78%,
            var(--tch-secondary) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle 4px at 86% 82%,
            var(--tch-secondary) 0%,
            transparent 60%
        );
}
@keyframes ir-decree-splash {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.15);
    }
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

/* ── PHASE 7 : CTA ─────────────────────────────────────────────────────── */

/* Neutralise les pseudo-elements herites de .magnetic-btn (invitation-rewards.css)
   et de .magnetic-btn.shimmer (royal.css §6). Le rendu de ces pseudos creait
   un voile blanc diagonal visible sous forme d'une bande quasi-verticale
   au survol du CTA dore. Le design natif du CTA assure deja brillance et
   profondeur via son box-shadow multi-rings. */
.ir-decree-hero__cta::before,
.ir-decree-hero__cta::after {
    content: none;
    display: none;
}

.ir-decree-hero__cta {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 14px 32px;
    background: linear-gradient(
        135deg,
        var(--tch-accent) 0%,
        var(--tch-accent-hover) 100%
    );
    color: var(--tch-primary);
    font-family: var(--inv2-font-title);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--tch-accent-soft);
    border-radius: 32px;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--tch-primary) 70%, transparent),
        0 0 0 5px color-mix(in srgb, var(--tch-accent) 55%, transparent),
        0 12px 30px color-mix(in srgb, var(--tch-accent) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: translateY(20px);
    animation: ir-decree-cta-rise 0.9s var(--ir-ease-spring) 7.6s forwards;
    transition:
        transform 0.3s var(--ir-ease-spring),
        box-shadow 0.3s var(--ir-ease-out);
    cursor: pointer;
}
.ir-decree-hero__cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--tch-primary) 80%, transparent),
        0 0 0 5px var(--tch-accent-soft),
        0 18px 42px color-mix(in srgb, var(--tch-accent) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ir-decree-hero__cta-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s var(--ir-ease-out);
}
.ir-decree-hero__cta:hover .ir-decree-hero__cta-arrow {
    transform: translateX(4px);
}
@keyframes ir-decree-cta-rise {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Scroll indicator — mobile : dans le flow juste sous le CTA (pas d'espace
   vide entre eux). Desktop : absolute en bas du hero (position centrale). */
.ir-decree-hero__scroll {
    position: relative;
    margin: 24px auto 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--tch-accent);
    padding-left: 0.32em;
    opacity: 0;
    animation: ir-decree-fade 0.5s ease-out 8s forwards;
}
@media (min-width: 768px) {
    .ir-decree-hero__scroll {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }
}
.ir-decree-hero__scroll-line {
    display: block;
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, var(--tch-accent) 0%, transparent 100%);
    animation: ir-decree-scroll-line 2s ease-in-out infinite;
}
@keyframes ir-decree-scroll-line {
    0%,
    100% {
        transform: scaleY(0.4);
        transform-origin: top;
        opacity: 0.4;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
}

/* ── REPLAY : reset toutes les animations ──────────────────────────────── */
.ir-decree-hero.is-replaying .ir-decree-hero__fanfare,
.ir-decree-hero.is-replaying .ir-decree-hero__scroll-wrap,
.ir-decree-hero.is-replaying .ir-decree-hero__ribbon,
.ir-decree-hero.is-replaying .ir-decree-hero__parchment,
.ir-decree-hero.is-replaying [data-decree-line],
.ir-decree-hero.is-replaying .ir-decree-hero__addressee,
.ir-decree-hero.is-replaying .ir-decree-hero__seal,
.ir-decree-hero.is-replaying .ir-decree-hero__seal-splash,
.ir-decree-hero.is-replaying .ir-decree-hero__cta,
.ir-decree-hero.is-replaying .ir-decree-hero__replay,
.ir-decree-hero.is-replaying .ir-decree-hero__scroll {
    animation: none;
    opacity: 0;
}

/* ── MOBILE-FIRST AJUSTEMENTS PARCHEMIN ──────────────────────────────────
   Le padding du hero et la largeur du scroll-wrap sont definis en mobile-first
   en haut (.ir-decree-hero declaration principale). On ne touche pas ici.
   Seul l'interieur du parchemin est compresse pour gagner en lisibilite. */
@media (max-width: 540px) {
    .ir-decree-hero__parchment {
        padding: 24px 18px 40px;
    }
}

/* ── REDUCED MOTION : tout statique, contenu final visible ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .ir-decree-hero__sparkle,
    .ir-decree-hero__fanfare,
    .ir-decree-hero__banner,
    .ir-decree-hero__wave,
    .ir-decree-hero__scroll-wrap,
    .ir-decree-hero__ribbon,
    .ir-decree-hero__parchment,
    [data-decree-line],
    .ir-decree-hero__addressee,
    .ir-decree-hero__seal,
    .ir-decree-hero__seal-splash,
    .ir-decree-hero__cta,
    .ir-decree-hero__replay,
    .ir-decree-hero__scroll,
    .ir-decree-hero__scroll-line {
        animation: none;
        opacity: 1;
        transform: none;
        clip-path: none;
    }
    /* Cacher le ruban en final (parchemin doit être visible) */
    .ir-decree-hero__ribbon {
        display: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   VERSE ROYAL — Cartouche baroque adapté au livre (verseBook)
   ───────────────────────────────────────────────────────────────────────────── */

.ir-verse {
    position: relative;
    padding: clamp(60px, 10vh, 100px) 24px;
    display: flex;
    justify-content: center;
}

.ir-verse__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        color-mix(in srgb, var(--tch-accent) 10%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
    animation: ir-verse-breathe 6s ease-in-out infinite;
}
@keyframes ir-verse-breathe {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.ir-verse__frame {
    position: relative;
    max-width: 640px;
    padding: 64px 48px 56px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tch-primary) 60%, transparent) 0%,
        color-mix(in srgb, var(--ir-velvet-deep) 85%, transparent) 100%
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent) 35%, transparent);
    text-align: center;
}

.ir-verse__corner {
    position: absolute;
    width: 56px;
    height: 56px;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'><path d='M 4 28 L 4 4 L 28 4' fill='none' stroke='%23D4AF37' stroke-width='2'/><path d='M 12 22 Q 20 12, 26 10' fill='none' stroke='%23D4AF37' stroke-width='0.8' opacity='0.7'/><circle cx='12' cy='12' r='3.5' fill='%23D4AF37'/><path d='M 25 16 L 27 21 L 32 21 L 28 24 L 30 29 L 25 26 L 20 29 L 22 24 L 18 21 L 23 21 Z' fill='%23D4AF37' opacity='0.85'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}
.ir-verse__corner--tl {
    top: -10px;
    left: -10px;
}
.ir-verse__corner--tr {
    top: -10px;
    right: -10px;
    transform: scaleX(-1);
}
.ir-verse__corner--bl {
    bottom: -10px;
    left: -10px;
    transform: scaleY(-1);
}
.ir-verse__corner--br {
    bottom: -10px;
    right: -10px;
    transform: scale(-1, -1);
}

.ir-verse__symbol-main {
    font-size: 2.2rem;
    color: var(--tch-accent);
    margin-bottom: 8px;
    filter: drop-shadow(
        0 0 12px color-mix(in srgb, var(--tch-accent) 45%, transparent)
    );
    line-height: 1;
}

.ir-verse__symbol-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--tch-accent);
    opacity: 0.4;
    pointer-events: none;
}
.ir-verse__symbol-side--left {
    left: 8px;
}
.ir-verse__symbol-side--right {
    right: 8px;
}

.ir-verse__label {
    display: block;
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tch-accent), transparent 30%);
    padding-left: 0.28em;
    margin-bottom: 22px;
}

.ir-verse__text {
    font-family: var(--inv2-font-display);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-style: italic;
    line-height: 1.65;
    color: var(--tch-bg);
    margin: 0;
    letter-spacing: 0.005em;
}

.ir-verse__source {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-family: var(--inv2-font-title);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tch-accent);
    font-style: normal;
}
.ir-verse__source-dash {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--tch-accent);
    opacity: 0.7;
}

@media (max-width: 640px) {
    .ir-verse__frame {
        padding: 48px 28px 40px;
    }
    .ir-verse__corner {
        width: 44px;
        height: 44px;
    }
    .ir-verse__symbol-side {
        display: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PORTRAITS DU COUPLE — Diptyque cadres baroques sertis or, sépia + vignette
   Deux portraits côte à côte dans des cadres carrés à fleurons d'angle,
   esperluette ornée centrale, tilt 3D au survol, shine animé.
   ───────────────────────────────────────────────────────────────────────────── */

.ir-couple-portraits {
    position: relative;
    padding: clamp(60px, 10vh, 100px) 20px;
    text-align: center;
    perspective: 1200px;
}
.ir-couple-portraits__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}
.ir-couple-portraits__header-dash {
    position: relative;
    flex: 0 0 80px;
    height: 12px;
}
.ir-couple-portraits__header-dash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--tch-accent),
        transparent
    );
}
.ir-couple-portraits__header-dash::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--tch-accent);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent);
}
.ir-couple-portraits__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--tch-bg);
    margin: 0;
}
.ir-couple-portraits__lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 28%);
    margin: 0 auto 44px;
    max-width: 480px;
}

/* Diptyque — flex centré, esperluette au milieu */
.ir-couple-portraits__diptych {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vw, 36px);
    flex-wrap: wrap;
    max-width: 880px;
    margin: 0 auto;
}

.ir-couple-portraits__cadre {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transition: transform 0.5s var(--ir-ease-out);
    transform-style: preserve-3d;
    will-change: transform;
}
.ir-couple-portraits__cadre:hover {
    transform: rotateY(-4deg) rotateX(3deg) translateY(-4px);
}

/* Le cadre baroque carré — double passe-partout velours + sertissage or */
.ir-couple-portraits__frame {
    position: relative;
    width: clamp(180px, 32vw, 260px);
    aspect-ratio: 1 / 1;
    padding: 14px;
    background: linear-gradient(
        135deg,
        var(--tch-secondary) 0%,
        var(--tch-purple) 100%
    );
    box-shadow:
    /* Sertissage extérieur or */
        0 0 0 1px var(--tch-accent),
        0 0 0 4px #1a0830,
        0 0 0 5px var(--tch-accent-hover),
        /* Ombres profondes */ 0 18px 36px rgba(0, 0, 0, 0.55),
        0 36px 80px -20px rgba(0, 0, 0, 0.4),
        /* Glow or subtil */ 0 0 24px
            color-mix(in srgb, var(--tch-accent) 18%, transparent);
    transition: box-shadow 0.4s var(--ir-ease-out);
}
.ir-couple-portraits__cadre:hover .ir-couple-portraits__frame {
    box-shadow:
        0 0 0 1px var(--tch-accent-soft),
        0 0 0 4px #1a0830,
        0 0 0 5px var(--tch-accent),
        0 24px 48px rgba(0, 0, 0, 0.6),
        0 48px 100px -20px rgba(0, 0, 0, 0.45),
        0 0 40px color-mix(in srgb, var(--tch-accent) 40%, transparent);
}

/* Fleurons d'angle SVG */
.ir-couple-portraits__corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.ir-couple-portraits__corner--tl {
    top: -6px;
    left: -6px;
}
.ir-couple-portraits__corner--tr {
    top: -6px;
    right: -6px;
}
.ir-couple-portraits__corner--bl {
    bottom: -6px;
    left: -6px;
}
.ir-couple-portraits__corner--br {
    bottom: -6px;
    right: -6px;
}

/* Le lien/image */
.ir-couple-portraits__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ir-couple-portraits__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Filtre sépia chaud — l'effet "portrait royal" */
    filter: sepia(0.35) saturate(1.15) brightness(0.95) contrast(1.05);
    transition:
        transform 1.4s var(--ir-ease-out),
        filter 0.6s var(--ir-ease-out);
}
.ir-couple-portraits__cadre:hover .ir-couple-portraits__link img {
    transform: scale(1.06);
    filter: sepia(0.2) saturate(1.25) brightness(1.02) contrast(1.08);
}

/* Vignette — ombre radiale qui assombrit les bords */
.ir-couple-portraits__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 100% 100% at 50% 50%,
        transparent 50%,
        rgba(10, 5, 22, 0.35) 85%,
        rgba(10, 5, 22, 0.6) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Shine — reflet diagonal qui balaye le portrait au hover */
.ir-couple-portraits__shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 245, 220, 0.25) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 2;
    transition: left 0.8s var(--ir-ease-out);
}
.ir-couple-portraits__cadre:hover .ir-couple-portraits__shine {
    left: 150%;
}

/* Caption sous chaque portrait */
.ir-couple-portraits__caption {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    color: var(--tch-accent);
    text-shadow: 0 0 12px color-mix(in srgb, var(--tch-accent) 30%, transparent);
}
.ir-couple-portraits__caption-ornament {
    color: var(--tch-accent);
    opacity: 0.7;
    font-size: 0.8em;
}
.ir-couple-portraits__caption-name {
    letter-spacing: 0.02em;
}

/* Esperluette centrale ornée */
.ir-couple-portraits__amp {
    display: inline-block;
    width: clamp(38px, 8vw, 60px);
    height: clamp(50px, 11vw, 80px);
    filter: drop-shadow(
        0 0 12px color-mix(in srgb, var(--tch-accent) 40%, transparent)
    );
}
.ir-couple-portraits__amp svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 540px) {
    .ir-couple-portraits__diptych {
        flex-direction: column;
        gap: 8px;
    }
    /* Sur mobile, le cadre des portraits passe a ~78vw (au lieu du
       clamp(180px, 32vw, 260px) qui plafonnait a 180px et rendait les
       photos trop petites par rapport a la largeur du viewport). */
    .ir-couple-portraits__frame {
        width: min(78vw, 360px);
    }
    .ir-couple-portraits__amp {
        transform: rotate(0deg);
        margin: 4px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ir-couple-portraits__cadre,
    .ir-couple-portraits__link img,
    .ir-couple-portraits__shine {
        transition: none;
        transform: none;
    }
    .ir-couple-portraits__cadre:hover {
        transform: none;
    }
    .ir-couple-portraits__cadre:hover .ir-couple-portraits__link img {
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   NOTRE HISTOIRE — Constellation céleste (storytelling stellaire)
   La section StoryViewer existante reçoit un habillage cosmologique :
   ciel velours étoilé, milestones reliés en constellation dorée, le bouton
   d'ouverture devient le centre du ciel. StoryViewer JS inchangé.
   ───────────────────────────────────────────────────────────────────────────── */

/* La section .ir-stargate (override total du story_section dans royal/show.twig)
   est une carte celeste avec milestones positionnees en etoiles cliquables */
.ir-stargate {
    position: relative;
    padding: clamp(80px, 14vh, 140px) 20px;
    background:
    /* Etoiles statiques disseminees */
        radial-gradient(
            2px 2px at 12% 18%,
            rgba(255, 245, 220, 0.85),
            transparent 50%
        ),
        radial-gradient(
            1.5px 1.5px at 24% 32%,
            rgba(255, 245, 220, 0.7),
            transparent 50%
        ),
        radial-gradient(
            1px 1px at 38% 12%,
            rgba(255, 245, 220, 0.9),
            transparent 50%
        ),
        radial-gradient(
            2px 2px at 52% 8%,
            rgba(255, 245, 220, 0.85),
            transparent 50%
        ),
        radial-gradient(
            1.5px 1.5px at 68% 16%,
            rgba(255, 245, 220, 0.6),
            transparent 50%
        ),
        radial-gradient(
            1px 1px at 82% 36%,
            rgba(255, 245, 220, 0.8),
            transparent 50%
        ),
        radial-gradient(
            1.5px 1.5px at 8% 58%,
            rgba(255, 245, 220, 0.7),
            transparent 50%
        ),
        radial-gradient(
            2px 2px at 92% 72%,
            rgba(255, 245, 220, 0.85),
            transparent 50%
        ),
        radial-gradient(
            1px 1px at 40% 92%,
            rgba(255, 245, 220, 0.6),
            transparent 50%
        ),
        radial-gradient(
            1.5px 1.5px at 58% 88%,
            rgba(255, 245, 220, 0.75),
            transparent 50%
        ),
        /* Nebuleuse pourpre + or */
        radial-gradient(
                ellipse 80% 60% at 30% 30%,
                color-mix(in srgb, var(--tch-purple) 40%, transparent) 0%,
                transparent 60%
            ),
        radial-gradient(
            ellipse 60% 50% at 70% 70%,
            color-mix(in srgb, var(--tch-accent) 10%, transparent) 0%,
            transparent 65%
        ),
        /* Fond velours profond — derive de --tch-primary pour suivre la palette mariage */
        linear-gradient(
                180deg,
                var(--ir-velvet-deep) 0%,
                var(--tch-primary) 50%,
                var(--ir-velvet-deep) 100%
            );
    overflow: hidden;
    text-align: center;
}

/* Indicator — soleil couronne au lieu du numero generique */
.ir-stargate__indicator {
    position: relative;
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
}
.ir-stargate__indicator-sun {
    width: clamp(72px, 14vw, 96px);
    height: clamp(72px, 14vw, 96px);
    display: block;
    filter: drop-shadow(
        0 0 16px color-mix(in srgb, var(--tch-accent) 60%, transparent)
    );
    animation: ir-sun-rotate 60s linear infinite;
}
.ir-stargate__indicator-sun svg {
    width: 100%;
    height: 100%;
    display: block;
}
@keyframes ir-sun-rotate {
    to {
        transform: rotate(360deg);
    }
}
.ir-stargate__indicator-label {
    font-family: var(--inv2-font-title);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tch-accent);
    padding-left: 0.28em;
}

/* Header baroque coherent avec autres sections */
.ir-stargate__header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}
.ir-stargate__header-dash {
    position: relative;
    flex: 0 0 80px;
    height: 12px;
}
.ir-stargate__header-dash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--tch-accent),
        transparent
    );
}
.ir-stargate__header-dash::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--tch-accent);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent);
}
.ir-stargate__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.7rem, 4.4vw, 2.4rem);
    color: var(--tch-accent);
    margin: 0;
    text-shadow: 0 0 18px color-mix(in srgb, var(--tch-accent) 40%, transparent);
}
.ir-stargate__lede {
    position: relative;
    z-index: 3;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 25%);
    margin: 0 auto 40px;
    max-width: 500px;
    line-height: 1.6;
}

/* ── GALERIE DE MOMENTS — Cartes immersives avec preview media ─────────── */
/* Layout : grille adaptative (1 col mobile, 2 cols tablette, 3 cols desktop).
   Chaque carte = etoile badge + preview image/video + titre + date + CTA. */
.ir-stargate__gallery {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(100%, 920px);
    margin: 0 auto 40px;
    padding: 0 6px;
}
@media (min-width: 600px) {
    .ir-stargate__gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}
@media (min-width: 992px) {
    .ir-stargate__gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* Sky decoratif est position fixed dans le conteneur stargate */
.ir-stargate__sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* CARTE CLIQUABLE — bouton qui declenche le portail temporel + StoryViewer */
.ir-stargate__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ir-velvet-soft) 70%, transparent) 0%,
        color-mix(in srgb, var(--tch-primary) 85%, transparent) 100%
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent) 35%, transparent);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 8%, transparent),
        0 18px 36px rgba(0, 0, 0, 0.45),
        0 30px 60px -20px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.4s var(--ir-ease-out),
        border-color 0.3s var(--ir-ease-out),
        box-shadow 0.4s var(--ir-ease-out);
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    animation: ir-card-arrive 0.8s var(--ir-ease-spring) forwards;
    animation-delay: calc(var(--card-delay, 0s) + 0.3s);
}
@keyframes ir-card-arrive {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.ir-stargate__card:hover,
.ir-stargate__card:focus-visible {
    transform: translateY(-4px) scale(1.015);
    border-color: var(--tch-accent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 50%, transparent),
        0 24px 48px rgba(0, 0, 0, 0.55),
        0 0 50px color-mix(in srgb, var(--tch-accent) 25%, transparent);
    outline: none;
}

/* Badge etoile en haut gauche de la carte (numero + icone) */
.ir-stargate__card-star {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 4;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 248, 216, 0.15) 0%,
        color-mix(in srgb, var(--tch-primary) 85%, transparent) 100%
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent) 60%, transparent);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.55),
        0 0 12px color-mix(in srgb, var(--tch-accent) 30%, transparent);
    filter: drop-shadow(
        0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent)
    );
}
.ir-stargate__card-star svg {
    width: 22px;
    height: 22px;
    display: block;
}
.ir-stargate__card-num {
    position: absolute;
    bottom: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: linear-gradient(
        135deg,
        var(--tch-accent) 0%,
        var(--tch-accent-hover) 100%
    );
    color: var(--tch-primary);
    font-family: var(--inv2-font-title);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Preview media en haut de la carte (16:9 ratio uniforme) */
.ir-stargate__card-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--tch-purple) 0%,
        var(--tch-primary) 100%
    );
}
.ir-stargate__card-preview img,
.ir-stargate__card-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition:
        transform 1.2s var(--ir-ease-out),
        filter 0.4s var(--ir-ease-out);
    filter: saturate(0.95);
}
.ir-stargate__card:hover .ir-stargate__card-preview img,
.ir-stargate__card:hover .ir-stargate__card-preview video {
    transform: scale(1.06);
    filter: saturate(1.15) brightness(1.05);
}
/* Voile gradient bas du preview pour lisibilite si overlap avec texte */
.ir-stargate__card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 50%,
        color-mix(in srgb, var(--tch-primary) 45%, transparent) 100%
    );
    pointer-events: none;
}
/* Badge 'video' qui apparait en bas-droite du preview si video */
.ir-stargate__card-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tch-primary) 85%, transparent);
    border: 1px solid var(--tch-accent);
    border-radius: 50%;
    backdrop-filter: blur(6px);
}
.ir-stargate__card-badge svg {
    width: 10px;
    height: 10px;
}

/* Placeholder velours si pas de media disponible */
.ir-stargate__card-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            ellipse 60% 60% at 50% 50%,
            color-mix(in srgb, var(--tch-accent) 12%, transparent) 0%,
            transparent 70%
        ),
        linear-gradient(135deg, var(--tch-purple) 0%, var(--tch-primary) 100%);
}
.ir-stargate__card-preview-empty svg {
    width: 50%;
    height: 50%;
    filter: drop-shadow(
        0 0 12px color-mix(in srgb, var(--tch-accent) 40%, transparent)
    );
}

/* Bloc texte sous le preview : titre + date + action */
.ir-stargate__card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px 18px;
    text-align: left;
}
.ir-stargate__card-title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 2.4vw, 1.2rem);
    line-height: 1.3;
    color: var(--tch-bg);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    margin: 0;
}
.ir-stargate__card-date {
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tch-accent);
    padding-left: 0.28em;
}
.ir-stargate__card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-family: var(--inv2-font-title);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tch-accent);
    padding-left: 0.22em;
    transition:
        color 0.3s var(--ir-ease-out),
        gap 0.3s var(--ir-ease-out);
}
.ir-stargate__card-action svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s var(--ir-ease-out);
}
.ir-stargate__card:hover .ir-stargate__card-action {
    color: #fff8d8;
    gap: 14px;
}
.ir-stargate__card:hover .ir-stargate__card-action svg {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .ir-stargate__card {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .ir-stargate__card:hover {
        transform: none;
    }
    .ir-stargate__card-preview img,
    .ir-stargate__card-preview video {
        transition: none;
    }
}

/* Petites etoiles decoratives en arriere-plan dans la carte */
.ir-stargate__decor {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff8d8;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 248, 216, 0.8);
    animation: ir-decor-twinkle 4s ease-in-out infinite;
    pointer-events: none;
}
.ir-stargate__decor--1 {
    top: 12%;
    left: 8%;
    animation-delay: 0s;
}
.ir-stargate__decor--2 {
    top: 24%;
    left: 38%;
    animation-delay: 0.5s;
}
.ir-stargate__decor--3 {
    top: 18%;
    left: 62%;
    animation-delay: 1s;
}
.ir-stargate__decor--4 {
    top: 38%;
    left: 88%;
    animation-delay: 1.5s;
}
.ir-stargate__decor--5 {
    top: 58%;
    left: 22%;
    animation-delay: 2s;
}
.ir-stargate__decor--6 {
    top: 72%;
    left: 48%;
    animation-delay: 2.5s;
}
.ir-stargate__decor--7 {
    top: 82%;
    left: 78%;
    animation-delay: 3s;
}
.ir-stargate__decor--8 {
    top: 88%;
    left: 12%;
    animation-delay: 3.5s;
}
@keyframes ir-decor-twinkle {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* CTA — parcourir la chronique entiere */
.ir-stargate__cta {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: linear-gradient(
        135deg,
        var(--tch-accent) 0%,
        var(--tch-accent-hover) 100%
    );
    color: var(--tch-primary);
    font-family: var(--inv2-font-title);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--tch-accent), #fff 25%);
    border-radius: 0;
    cursor: pointer;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--tch-primary) 60%, transparent),
        0 0 0 4px color-mix(in srgb, var(--tch-accent) 45%, transparent),
        0 10px 30px color-mix(in srgb, var(--tch-accent) 40%, transparent);
    transition:
        transform 0.3s var(--ir-ease-spring),
        box-shadow 0.3s var(--ir-ease-out);
}
.ir-stargate__cta:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--tch-primary) 70%, transparent),
        0 0 0 4px var(--tch-accent),
        0 14px 36px color-mix(in srgb, var(--tch-accent) 55%, transparent);
}
.ir-stargate__cta-icon {
    color: var(--tch-primary);
    font-size: 1.1em;
}

@media (max-width: 540px) {
    .ir-stargate__map {
        aspect-ratio: 4 / 5;
    }
    .ir-stargate__star {
        width: 44px;
        height: 44px;
    }
    .ir-stargate__star-label {
        bottom: -50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ir-stargate__indicator-sun,
    .ir-stargate__line,
    .ir-stargate__star,
    .ir-stargate__star-glow,
    .ir-stargate__decor {
        animation: none;
    }
    .ir-stargate__star {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    .ir-stargate__line {
        stroke-dashoffset: 0;
    }
}

.ir-audience {
    position: relative;
    padding: clamp(60px, 10vh, 100px) 20px;
    text-align: center;
}
.ir-audience__indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}
.ir-audience__indicator-num {
    font-family: var(--inv2-font-title);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tch-accent);
    width: 56px;
    height: 56px;
    border: 1px solid var(--tch-accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tch-accent) 8%, transparent);
}
.ir-audience__indicator-label {
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tch-accent);
    padding-left: 0.28em;
}

.ir-audience__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}
.ir-audience__header-dash,
.ir-court__header-dash,
.ir-programme__header-dash,
.ir-dresscode__header-dash {
    position: relative;
    flex: 0 0 80px;
    height: 12px;
    background: none;
}
.ir-audience__header-dash::before,
.ir-court__header-dash::before,
.ir-programme__header-dash::before,
.ir-dresscode__header-dash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--tch-accent) 30%,
        var(--tch-accent) 70%,
        transparent 100%
    );
}
.ir-audience__header-dash::after,
.ir-court__header-dash::after,
.ir-programme__header-dash::after,
.ir-dresscode__header-dash::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--tch-accent);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent);
}
.ir-audience__title {
    font-family: var(--inv2-font-display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 500;
    font-style: italic;
    color: var(--tch-bg);
    margin: 0;
}
.ir-audience__lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 30%);
    margin: 0 auto 48px;
    max-width: 460px;
}

.ir-audience__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px;
    max-width: 880px;
    margin: 0 auto;
}
/* L'AUDIENCE — Galerie de portraits ancestraux dans cadres ovales hauts
   (vs. Cortège qui est une procession de cercles reliés en bas).
   Differenciation forte : cadre rectangulaire arche gothique, drape velours
   au-dessus, plaque dorée gravée en-dessous. Style 'salle d'audience royale'. */
.ir-audience__medallion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}
/* Drapé velours rouge au-dessus de chaque portrait (couronne suspendue) */
.ir-audience__medallion::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 50%;
    height: 12px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        #7a1d2e 0%,
        var(--tch-secondary) 60%,
        #3a0810 100%
    );
    clip-path: polygon(
        0% 0%,
        100% 0%,
        92% 80%,
        80% 30%,
        50% 100%,
        20% 30%,
        8% 80%
    );
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    z-index: 2;
}
.ir-audience__medallion-frame {
    position: relative;
    width: 110px;
    height: 150px;
    /* Forme arche gothique — sommet arrondi + base droite */
    border-radius: 55px 55px 6px 6px;
    background:
    /* Vignette douce au centre */
        radial-gradient(
            ellipse 70% 60% at 50% 35%,
            color-mix(in srgb, var(--tch-purple) 50%, transparent) 0%,
            transparent 60%
        ),
        /* Velours sombre */
        linear-gradient(
                180deg,
                var(--ir-velvet-soft) 0%,
                var(--tch-primary) 50%,
                var(--ir-velvet-deep) 100%
            );
    border: 2px solid var(--tch-accent);
    box-shadow:
    /* Double sertissage or à 2 niveaux */
        0 0 0 1px var(--tch-primary),
        0 0 0 5px var(--tch-accent-hover),
        0 0 0 6px var(--ir-velvet-deep),
        /* Ombre profonde */ 0 16px 36px rgba(0, 0, 0, 0.6),
        0 0 24px color-mix(in srgb, var(--tch-accent) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.4s var(--ir-ease-out),
        box-shadow 0.4s var(--ir-ease-out);
}
.ir-audience__medallion:hover .ir-audience__medallion-frame {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px var(--tch-primary),
        0 0 0 5px var(--tch-accent),
        0 0 0 6px var(--ir-velvet-deep),
        0 22px 44px rgba(0, 0, 0, 0.65),
        0 0 36px color-mix(in srgb, var(--tch-accent) 35%, transparent);
}
/* Pictogramme symbolique en haut (couronne, fleuron, etc.) */
.ir-audience__medallion-icon {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: var(--tch-accent);
    background: none;
    padding: 0;
    border-radius: 0;
    z-index: 3;
    text-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 60%, transparent);
}
.ir-audience__medallion-initials {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--tch-accent);
    letter-spacing: 0.04em;
    text-shadow: 0 0 16px color-mix(in srgb, var(--tch-accent) 40%, transparent);
    margin-top: 16px;
}
/* Plaque dorée gravée sous chaque portrait (style musée) */
.ir-audience__medallion-name {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--tch-primary);
    margin: 12px 0 0;
    padding: 4px 14px 5px;
    background: linear-gradient(
        180deg,
        var(--tch-accent-soft) 0%,
        var(--tch-accent) 50%,
        var(--tch-accent-hover) 100%
    );
    border: 1px solid #8c6b22;
    border-radius: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}
.ir-audience__medallion-role {
    font-family: var(--inv2-font-title);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tch-accent);
    margin: 8px 0 0;
    padding-left: 0.28em;
    opacity: 0.75;
}

/* ─── Photo médaillon — cercle, fond couvert, encadrement or ─────────────── */
.ir-audience__medallion-photo {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, #d4af37 70%, transparent),
        inset 0 0 12px rgba(0, 0, 0, 0.4);
}

/* ─── Hommage — citation italique sous le rôle ──────────────────────────── */
.ir-audience__medallion-tribute {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--tch-bg), transparent 25%);
    margin: 10px auto 0;
    max-width: 220px;
    line-height: 1.4;
    text-align: center;
    opacity: 0.85;
}

/* ─── In memoriam — ton plus sobre, croix discrète, médaillon vieilli ───── */
.ir-audience__medallion--memoriam .ir-audience__medallion-frame {
    filter: grayscale(0.35) brightness(0.85);
}
.ir-audience__medallion--memoriam .ir-audience__medallion-name {
    opacity: 0.9;
}
.ir-audience__medallion-cross {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a0810 0%, #5a0e1a 100%);
    color: #d4af37;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 184, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════════════
   LE CORTÈGE — Galerie horizontale scrollable
   ───────────────────────────────────────────────────────────────────────────── */

.ir-court {
    position: relative;
    padding: clamp(40px, 8vh, 80px) 0 clamp(60px, 10vh, 100px);
    text-align: center;
}
.ir-court__indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}
.ir-court__indicator-num {
    font-family: var(--inv2-font-title);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tch-accent);
    width: 56px;
    height: 56px;
    border: 1px solid var(--tch-accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tch-accent) 8%, transparent);
}
.ir-court__indicator-label {
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tch-accent);
    padding-left: 0.28em;
}
.ir-court__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
    padding: 0 20px;
}
/* .ir-court__header-dash — styles centralisés avec .ir-audience__header-dash */
.ir-court__title {
    font-family: var(--inv2-font-display);
    font-size: clamp(1.5rem, 3.8vw, 2rem);
    font-weight: 500;
    font-style: italic;
    color: var(--tch-bg);
    margin: 0;
}
.ir-court__lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.9rem, 2.2vw, 1.05rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 35%);
    margin: 0 auto 40px;
    max-width: 460px;
    padding: 0 20px;
}
/* LE CORTÈGE — Procession circulaire : cercles relies par un fil dore continu
   (vs. Audience qui est galerie d'arches gothiques verticales).
   Le fil = ligne dorée tracée derrière les cercles, signature 'procession royale'. */
.ir-court__scroller {
    position: relative;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 28px 24px 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--tch-accent) 40%, transparent)
        transparent;
}
/* Fil dore continu qui relie tous les cercles a leur hauteur centrale */
.ir-court__scroller::before {
    content: "";
    position: absolute;
    top: 78px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--tch-accent) 60%, transparent) 8%,
        color-mix(in srgb, var(--tch-accent) 85%, transparent) 50%,
        color-mix(in srgb, var(--tch-accent) 60%, transparent) 92%,
        transparent 100%
    );
    box-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent);
    z-index: 0;
}
/* Points de jonction sur le fil — petites etoiles entre les cercles */
.ir-court__scroller::after {
    content: "";
    position: absolute;
    top: 74px;
    left: 24px;
    right: 24px;
    height: 10px;
    background:
        radial-gradient(
            circle at 14% 50%,
            var(--tch-accent) 0%,
            var(--tch-accent) 20%,
            transparent 22%
        ),
        radial-gradient(
            circle at 38% 50%,
            var(--tch-accent) 0%,
            var(--tch-accent) 20%,
            transparent 22%
        ),
        radial-gradient(
            circle at 62% 50%,
            var(--tch-accent) 0%,
            var(--tch-accent) 20%,
            transparent 22%
        ),
        radial-gradient(
            circle at 86% 50%,
            var(--tch-accent) 0%,
            var(--tch-accent) 20%,
            transparent 22%
        );
    background-size: 10px 10px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.ir-court__scroller::-webkit-scrollbar {
    height: 4px;
}
.ir-court__scroller::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--tch-accent) 40%, transparent);
    border-radius: 2px;
}
.ir-court__card {
    position: relative;
    flex: 0 0 auto;
    width: 140px;
    scroll-snap-align: center;
    text-align: center;
    z-index: 1;
}
.ir-court__card-frame {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background:
    /* Coupole dorée — degrade radial centre-vers-bord */ radial-gradient(
        circle at 50% 35%,
        #1b2e5c 0%,
        var(--ir-velvet-mid) 60%,
        var(--ir-velvet-deep) 100%
    );
    border: 2px solid var(--tch-accent);
    box-shadow:
    /* Triple sertissage circulaire */
        0 0 0 3px var(--ir-velvet-deep),
        0 0 0 4px color-mix(in srgb, var(--tch-accent) 40%, transparent),
        0 6px 18px rgba(0, 0, 0, 0.5),
        0 0 18px color-mix(in srgb, var(--tch-accent) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.4s var(--ir-ease-spring),
        box-shadow 0.4s var(--ir-ease-out);
}
.ir-court__card:hover .ir-court__card-frame {
    transform: scale(1.08) rotate(-3deg);
    box-shadow:
        0 0 0 3px var(--ir-velvet-deep),
        0 0 0 4px var(--tch-accent),
        0 10px 24px rgba(0, 0, 0, 0.5),
        0 0 28px color-mix(in srgb, var(--tch-accent) 60%, transparent);
}
.ir-court__card-icon {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: var(--tch-accent);
    background: var(--ir-velvet-deep);
    padding: 2px 6px;
    border-radius: 4px;
}
.ir-court__card-initials {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--tch-accent);
}
.ir-court__card-role {
    font-family: var(--inv2-font-title);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tch-bg);
    margin: 0;
    padding-left: 0.24em;
    line-height: 1.3;
    opacity: 0.85;
}

/* ═════════════════════════════════════════════════════════════════════════════
   PROGRAMME ROYAL — Horloge céleste : cadran décoratif + mini-cadrans par event
   ───────────────────────────────────────────────────────────────────────────── */

.ir-programme {
    position: relative;
    padding: clamp(60px, 10vh, 100px) 20px;
    text-align: center;
}

/* Horloge céleste décorative — cadran central */
.ir-programme__lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 28%);
    margin: 0 auto 32px;
    max-width: 480px;
}
.ir-programme__celestial-clock {
    width: clamp(180px, 38vw, 260px);
    height: clamp(180px, 38vw, 260px);
    margin: 0 auto 40px;
    filter: drop-shadow(
        0 0 24px color-mix(in srgb, var(--tch-accent) 35%, transparent)
    );
    animation: ir-clock-pulse 6s ease-in-out infinite;
}
.ir-programme__celestial-clock svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ir-clock-hand--hour {
    transform-origin: 120px 120px;
    animation: ir-clock-hand-rotate-hour 60s linear infinite;
}
.ir-clock-hand--minute {
    transform-origin: 120px 120px;
    animation: ir-clock-hand-rotate-min 12s linear infinite;
}
@keyframes ir-clock-pulse {
    0%,
    100% {
        filter: drop-shadow(
            0 0 18px color-mix(in srgb, var(--tch-accent) 30%, transparent)
        );
    }
    50% {
        filter: drop-shadow(
            0 0 36px color-mix(in srgb, var(--tch-accent) 55%, transparent)
        );
    }
}
@keyframes ir-clock-hand-rotate-hour {
    to {
        transform: rotate(360deg);
    }
}
@keyframes ir-clock-hand-rotate-min {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ir-programme__celestial-clock,
    .ir-clock-hand--hour,
    .ir-clock-hand--minute {
        animation: none;
    }
}
.ir-programme__indicator,
.ir-dresscode__indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}
.ir-programme__indicator-num,
.ir-dresscode__indicator-num {
    font-family: var(--inv2-font-title);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tch-accent);
    width: 56px;
    height: 56px;
    border: 1px solid var(--tch-accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tch-accent) 8%, transparent);
}
.ir-programme__indicator-label,
.ir-dresscode__indicator-label {
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tch-accent);
    padding-left: 0.28em;
}
.ir-programme__header,
.ir-dresscode__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 40px;
}
/* .ir-programme__header-dash, .ir-dresscode__header-dash — styles centralisés avec .ir-audience__header-dash */
.ir-programme__title,
.ir-dresscode__title {
    font-family: var(--inv2-font-display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 500;
    font-style: italic;
    color: var(--tch-bg);
    margin: 0;
}

/* Fond du cadran horaire du programme — suit la palette mariage.
   Remplace l'ancien attribut fill="rgba(10, 26, 63, 0.95)" en dur. */
.ir-programme__seal-dial {
    fill: color-mix(in srgb, var(--tch-primary) 95%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────
   SVG INLINE — Couleurs variabilisees pour suivre la palette mariage.
   Les attributs fill="#xxxxxx" en dur ne consomment pas les CSS vars ;
   on bascule via class= pour heriter du var() approprie.
   ───────────────────────────────────────────────────────────────────────── */

.ir-svg-fill-primary {
    fill: var(--tch-primary);
}

.ir-svg-fill-secondary {
    fill: var(--tch-primary);
}

.ir-svg-fill-accent {
    fill: var(--tch-accent);
}

/* SVG <stop> et stroke : les attributs HTML ignorent var(),
   on bascule via classe CSS pour suivre la palette du mariage.

   Sceau de cire : on utilise les stops PRIMARY (et non SECONDARY) car le
   role "primary" est par convention la couleur dominante sombre du couple.
   Beaucoup de mariages cooptent la `secondary` pour un highlight clair
   (ex. Tinho & Tina secondary = #ffd700), ce qui rendait le sceau jaune. */

.ir-svg-stop-primary-light {
    stop-color: color-mix(in srgb, var(--tch-primary) 80%, #2a0a14);
}

.ir-svg-stop-primary {
    stop-color: var(--tch-primary);
}

.ir-svg-stop-primary-dark {
    stop-color: color-mix(in srgb, var(--tch-primary) 60%, #000000);
}

.ir-svg-stop-accent-light {
    stop-color: color-mix(in srgb, var(--tch-accent) 60%, #ffffff);
}

.ir-svg-stop-accent {
    stop-color: var(--tch-accent);
}

.ir-svg-stop-accent-dark {
    stop-color: color-mix(in srgb, var(--tch-accent) 65%, #000000);
}

.ir-svg-stop-secondary-light {
    stop-color: color-mix(in srgb, var(--tch-secondary) 75%, #ffffff);
}

.ir-svg-stop-secondary {
    stop-color: var(--tch-secondary);
}

.ir-svg-stop-secondary-dark {
    stop-color: color-mix(in srgb, var(--tch-secondary) 55%, #000000);
}

.ir-svg-stroke-accent {
    stroke: var(--tch-accent);
}

.ir-svg-stroke-accent-dark {
    stroke: color-mix(in srgb, var(--tch-accent) 55%, #000000);
}

.ir-svg-stroke-secondary-dark {
    stroke: color-mix(in srgb, var(--tch-secondary) 50%, #000000);
}

.ir-programme__timeline {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 720px;
}
.ir-programme__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 36px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--tch-accent) 10%,
        var(--tch-accent) 90%,
        transparent 100%
    );
    opacity: 0.7;
}
.ir-programme__entry {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 12px 0 32px 0;
}
.ir-programme__entry-seal {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    z-index: 2;
    position: relative;
}
.ir-programme__entry-seal svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(
        0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent)
    );
    animation: ir-seal-pulse 4s ease-in-out infinite;
}
@keyframes ir-seal-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

.ir-programme__card {
    flex: 1;
    text-align: left;
    background: color-mix(in srgb, var(--tch-primary) 40%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 25%, transparent);
    padding: 20px 24px;
}
.ir-programme__card-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ir-programme__card-time {
    font-family: var(--inv2-font-title);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--tch-accent);
}
.ir-programme__card-time i {
    font-size: 0.8rem;
    margin-right: 6px;
    opacity: 0.7;
}
.ir-programme__card-name {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--tch-bg);
    margin: 0;
}
.ir-programme__card-cartouche {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--tch-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 30%, transparent);
    font-family: var(--inv2-font-title);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tch-accent);
    margin-bottom: 12px;
    padding-left: calc(12px + 0.22em);
}
.ir-programme__card-cartouche-mark {
    font-size: 0.55rem;
    opacity: 0.6;
}
.ir-programme__card-address {
    font-family: var(--inv2-font-body);
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--tch-bg), transparent 30%);
    margin: 0 0 8px;
}
.ir-programme__card-address i {
    color: var(--tch-accent);
    margin-right: 6px;
}
.ir-programme__card-desc {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--tch-bg), transparent 20%);
    margin: 8px 0;
}
.ir-programme__card-map {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-family: var(--inv2-font-title);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tch-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.3s var(--ir-ease-out);
    padding-left: 0.18em;
}
.ir-programme__card-map:hover {
    border-bottom-color: var(--tch-accent);
}

@media (max-width: 640px) {
    .ir-programme__entry {
        gap: 14px;
    }
    .ir-programme__entry-seal {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }
    .ir-programme__line {
        left: 28px;
    }
    .ir-programme__card {
        padding: 16px 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMME ROYAL v2 — « Le Cabinet du Roi »
   ═══════════════════════════════════════════════════════════════════════════
   Direction artistique : chaque événement devient une MONTRE À GOUSSET
   baroque. Le cadran (SVG existant) est agrandi à 180-220 px, encadré d'une
   lunette dorée ciselée, surmonté d'une couronne de remontoir, suspendu à
   un ruban de velours. La chronologie verticale devient une CHAÎNE D'OR
   serpentine. Sur desktop, les montres alternent gauche/droite en zigzag
   pour rompre la monotonie verticale (lecture en S).

   Tous les overrides via `body.theme-royal-page` pour spécificité maximale.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-royal-page .ir-programme {
    --pgm-r-gold-h: #fff1b8;
    --pgm-r-gold: #d4af37;
    --pgm-r-gold-d: #7a5b1a;
    --pgm-r-velvet-h: #8b1124;
    --pgm-r-velvet: #6a0e1e;
    --pgm-r-velvet-d: #3a0810;
    --pgm-r-watch-size: 200px;
    --pgm-r-watch-size-mobile: 168px;
}

/* ─── TIMELINE → CHAÎNE D'OR ─── Remplace la fine ligne par une chaîne serpentine */
body.theme-royal-page .ir-programme__timeline {
    max-width: 920px;
    list-style: none;
    padding: 0;
    margin: 60px auto 0;
    position: relative;
}
body.theme-royal-page .ir-programme__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='44' viewBox='0 0 22 44' fill='none'><ellipse cx='11' cy='10' rx='5.5' ry='8' stroke='%23d4af37' stroke-width='2.2'/><ellipse cx='11' cy='34' rx='8' ry='5.5' stroke='%23d4af37' stroke-width='2.2'/></svg>")
        repeat-y center top / 22px 44px;
    opacity: 0.7;
    filter: drop-shadow(
        0 0 6px color-mix(in srgb, var(--tch-accent), transparent 60%)
    );
    z-index: 0;
}

/* ─── ENTRÉE = MONTRE À GOUSSET + CARTE DE FOND ─── */
body.theme-royal-page .ir-programme__entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "seal" "card";
    gap: 24px;
    padding: 28px 0 48px;
    justify-items: center;
}

/* DESKTOP : zigzag — odd = montre à gauche / carte à droite, even = inverse */
@media (min-width: 768px) {
    body.theme-royal-page .ir-programme__entry {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "seal card";
        gap: clamp(32px, 5vw, 64px);
        padding: 40px 0 64px;
        align-items: center;
        justify-items: stretch;
    }
    body.theme-royal-page
        .ir-programme__entry:nth-child(even of .ir-programme__entry) {
        grid-template-areas: "card seal";
    }
    /* Fallback pour navigateurs sans :nth-child(of S) — sélecteur direct */
    body.theme-royal-page .ir-programme__entry:nth-child(even) {
        grid-template-areas: "card seal";
    }
}

/* ─── LA MONTRE À GOUSSET ─── Le cadran SVG existant devient géant */
body.theme-royal-page .ir-programme__entry-seal {
    grid-area: seal;
    flex: none;
    width: var(--pgm-r-watch-size);
    height: var(--pgm-r-watch-size);
    position: relative;
    z-index: 2;
    justify-self: center;
    /* Place le cadran via marge pour aligner avec la chaîne centrale en desktop */
}

/* Suspension : ruban de velours qui descend de la chaîne au sommet de la montre */
body.theme-royal-page .ir-programme__entry-seal::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 28px;
    background: linear-gradient(
        180deg,
        var(--pgm-r-velvet-d) 0%,
        var(--pgm-r-velvet) 40%,
        var(--pgm-r-velvet-h) 50%,
        var(--pgm-r-velvet) 60%,
        var(--pgm-r-velvet-d) 100%
    );
    pointer-events: none;
}

/* Couronne de remontoir (la « tige » en haut de toute montre à gousset) */
body.theme-royal-page .ir-programme__entry-seal::after {
    content: "";
    position: absolute;
    bottom: calc(100% - 14px);
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 16px;
    background: radial-gradient(
        ellipse at 50% 30%,
        var(--pgm-r-gold-h) 0%,
        var(--pgm-r-gold) 55%,
        var(--pgm-r-gold-d) 100%
    );
    border-radius: 6px 6px 8px 8px;
    box-shadow:
        inset 0 1px 1px rgba(255, 248, 216, 0.55),
        inset 0 -2px 3px rgba(58, 8, 16, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* SVG cadran : devient grand + lunette dorée gravée */
body.theme-royal-page .ir-programme__entry-seal svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 32% 28%,
        color-mix(in srgb, var(--tch-primary) 60%, transparent) 0%,
        color-mix(in srgb, var(--tch-primary) 85%, #000) 70%,
        color-mix(in srgb, var(--tch-primary) 90%, #000) 100%
    );
    box-shadow:
        /* Lunette dorée extérieure (épaisse) */
        0 0 0 4px var(--pgm-r-gold-d),
        0 0 0 7px var(--pgm-r-gold),
        0 0 0 9px var(--pgm-r-gold-d),
        /* Anneau intérieur or fin */ inset 0 0 0 2px
            color-mix(in srgb, var(--tch-accent), transparent 55%),
        /* Reflets ciselés */ inset 0 6px 18px rgba(255, 248, 216, 0.08),
        inset 0 -10px 28px rgba(0, 0, 0, 0.45),
        /* Halo extérieur + drop shadow */ 0 0 32px
            color-mix(in srgb, var(--tch-accent), transparent 70%),
        0 18px 40px rgba(0, 0, 0, 0.5);
    filter: none;
    animation: none;
    transition:
        transform 0.5s var(--ir-ease-spring),
        box-shadow 0.5s var(--ir-ease-out);
    will-change: transform;
}

/* Hover : la montre s'illumine et bascule très légèrement (comme tenue à la main) */
body.theme-royal-page .ir-programme__entry:hover .ir-programme__entry-seal svg {
    transform: rotate(-3deg) scale(1.04);
    box-shadow:
        0 0 0 4px var(--pgm-r-gold-d),
        0 0 0 7px var(--pgm-r-gold-h),
        0 0 0 9px var(--pgm-r-gold-d),
        inset 0 0 0 2px color-mix(in srgb, var(--tch-accent), transparent 35%),
        inset 0 6px 18px rgba(255, 248, 216, 0.12),
        inset 0 -10px 28px rgba(0, 0, 0, 0.45),
        0 0 50px rgba(244, 217, 123, 0.5),
        0 18px 40px rgba(0, 0, 0, 0.55);
}

/* Réveil au scroll : effet de tic-tac à l'entrée — la montre s'enclenche */
body.theme-royal-page
    .ir-programme__entry[data-reveal]
    .ir-programme__entry-seal
    svg {
    animation: ir-pgm-watch-tick 0.9s var(--ir-ease-spring) both;
}
@keyframes ir-pgm-watch-tick {
    0% {
        transform: rotate(-180deg) scale(0.4);
        opacity: 0;
    }
    60% {
        transform: rotate(8deg) scale(1.1);
        opacity: 1;
    }
    80% {
        transform: rotate(-3deg) scale(0.98);
    }
    100% {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

/* Lustre doré qui balaye la lunette à intervalle */
body.theme-royal-page .ir-programme__entry-seal {
    overflow: visible;
}
body.theme-royal-page .ir-programme__entry-seal svg {
    position: relative;
    overflow: hidden;
}

/* ─── CARTE = PLAQUE GRAVÉE ─── Refonte complète du card en plaque royale */
body.theme-royal-page .ir-programme__card {
    grid-area: card;
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 12px,
            rgba(244, 217, 123, 0.04) 12px,
            rgba(244, 217, 123, 0.04) 13px
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--tch-primary) 75%, #000) 0%,
            color-mix(in srgb, var(--tch-primary) 60%, #000) 100%
        );
    border: none;
    padding: 28px 28px 24px;
    position: relative;
    border-radius: 4px;
    /* Double filet doré + ornement coin */
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--tch-accent), transparent 55%),
        inset 0 0 0 4px color-mix(in srgb, var(--tch-primary) 90%, #000),
        inset 0 0 0 5px color-mix(in srgb, var(--tch-accent), transparent 30%),
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(58, 8, 16, 0.6);
    transition:
        transform 0.4s var(--ir-ease-spring),
        box-shadow 0.4s var(--ir-ease-out);
}

/* Ornements de coin — fleurs de lys aux 4 angles */
body.theme-royal-page .ir-programme__card::before,
body.theme-royal-page .ir-programme__card::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d4af37'><path d='M8 2 L9.5 6 L8 8 L6.5 6 Z M2 8 L6 9.5 L8 8 L6 6.5 Z M14 8 L10 9.5 L8 8 L10 6.5 Z M8 14 L9.5 10 L8 8 L6.5 10 Z'/></svg>")
        no-repeat center / contain;
    opacity: 0.7;
}
body.theme-royal-page .ir-programme__card::before {
    top: 8px;
    left: 8px;
}
body.theme-royal-page .ir-programme__card::after {
    bottom: 8px;
    right: 8px;
}

/* Hover : la plaque s'élève + lustre or */
body.theme-royal-page .ir-programme__entry:hover .ir-programme__card {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--tch-accent), transparent 30%),
        inset 0 0 0 4px color-mix(in srgb, var(--tch-primary) 90%, #000),
        inset 0 0 0 5px rgba(255, 241, 184, 0.9),
        0 18px 44px rgba(0, 0, 0, 0.6),
        0 0 36px color-mix(in srgb, var(--tch-accent), transparent 75%);
}

/* En-tête de carte : heure devient un cartouche cerclé d'or */
body.theme-royal-page .ir-programme__card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
body.theme-royal-page .ir-programme__card-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    border: 1px solid color-mix(in srgb, var(--tch-accent), transparent 60%);
    border-radius: 2px;
    background: rgba(58, 8, 16, 0.25);
    color: var(--pgm-r-gold-h);
    font-family: var(--inv2-font-title);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    text-transform: uppercase;
}
body.theme-royal-page .ir-programme__card-time i {
    font-size: 0.7rem;
    color: var(--pgm-r-gold);
}
body.theme-royal-page .ir-programme__card-name {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1.35rem, 3.2vw, 1.75rem);
    line-height: 1.15;
    color: var(--tch-bg);
    margin: 0;
    /* Lustre or sur le titre via background-clip */
    background: linear-gradient(
        135deg,
        var(--tch-bg) 0%,
        var(--pgm-r-gold-h) 50%,
        var(--tch-bg) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Cartouche lieu : ruban or */
body.theme-royal-page .ir-programme__card-cartouche {
    background: linear-gradient(
        180deg,
        rgba(244, 217, 123, 0.12) 0%,
        color-mix(in srgb, var(--tch-accent), transparent 82%) 100%
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent), transparent 50%);
    border-radius: 0;
    padding: 7px 14px 7px calc(14px + 0.22em);
    margin-bottom: 14px;
    box-shadow: inset 0 0 0 0.5px rgba(58, 8, 16, 0.3);
}

/* Adresse + description : palettes douces */
body.theme-royal-page .ir-programme__card-address {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--tch-bg), transparent 25%);
}
body.theme-royal-page .ir-programme__card-address i {
    color: var(--pgm-r-gold);
}
body.theme-royal-page .ir-programme__card-desc {
    font-size: 1rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--tch-bg), transparent 15%);
    margin: 10px 0 14px;
}

/* CTA itinéraire — bouton plus marqué */
body.theme-royal-page .ir-programme__card-map {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-top: 6px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-accent), transparent 85%) 0%,
        color-mix(in srgb, var(--tch-accent), transparent 95%) 100%
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent), transparent 40%);
    border-radius: 0;
    color: var(--pgm-r-gold-h);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    transition:
        background 0.3s var(--ir-ease-out),
        transform 0.3s var(--ir-ease-spring),
        box-shadow 0.3s var(--ir-ease-out);
    border-bottom: 1px solid
        color-mix(in srgb, var(--tch-accent), transparent 40%);
}
body.theme-royal-page .ir-programme__card-map:hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-accent), transparent 70%) 0%,
        color-mix(in srgb, var(--tch-accent), transparent 85%) 100%
    );
    transform: translateY(-2px);
    box-shadow: 0 6px 20px
        color-mix(in srgb, var(--tch-accent), transparent 75%);
    border-bottom-color: var(--pgm-r-gold);
}

/* Cache la lede sous le header — déjà géré ailleurs ; on garde le markup intact */

/* ─── MOBILE (<768px) ─── Vertical stack, montres plus petites, sans zigzag ─── */
@media (max-width: 767px) {
    body.theme-royal-page .ir-programme__entry-seal {
        width: var(--pgm-r-watch-size-mobile);
        height: var(--pgm-r-watch-size-mobile);
    }
    body.theme-royal-page .ir-programme__line {
        /* Chaîne fine sur mobile, alignée à gauche pour libérer l'espace */
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
    }
    body.theme-royal-page .ir-programme__entry {
        gap: 18px;
        padding: 20px 0 36px;
    }
    body.theme-royal-page .ir-programme__card {
        padding: 22px 20px 20px;
        width: 100%;
    }
    body.theme-royal-page .ir-programme__card-name {
        font-size: 1.3rem;
    }
}

/* ─── ACCESSIBILITÉ : prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
    body.theme-royal-page
        .ir-programme__entry[data-reveal]
        .ir-programme__entry-seal
        svg,
    body.theme-royal-page
        .ir-programme__entry:hover
        .ir-programme__entry-seal
        svg,
    body.theme-royal-page .ir-programme__entry:hover .ir-programme__card {
        animation: none;
        transform: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   DRESS CODE ROYAL — Cartouches Monsieur/Madame + palette gemmes
   ───────────────────────────────────────────────────────────────────────────── */

.ir-dresscode {
    position: relative;
    padding: clamp(60px, 10vh, 100px) 20px;
    text-align: center;
}
.ir-dresscode__lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 30%);
    margin: 0 auto 40px;
    max-width: 480px;
}
.ir-dresscode__split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    max-width: 760px;
    margin: 0 auto;
}
.ir-dresscode__card {
    text-align: center;
}
.ir-dresscode__card-img {
    display: block;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--tch-accent) 40%, transparent);
    padding: 8px;
    background: color-mix(in srgb, var(--tch-primary) 40%, transparent);
    margin-bottom: 16px;
    overflow: hidden;
}
.ir-dresscode__card-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s var(--ir-ease-out);
}
.ir-dresscode__card-img:hover img {
    transform: scale(1.04);
}
.ir-dresscode__card-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--tch-accent);
    margin: 0 0 10px;
}
.ir-dresscode__card-label-mark {
    font-size: 1rem;
    opacity: 0.7;
}
.ir-dresscode__card-desc {
    font-family: var(--inv2-font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--tch-bg), transparent 25%);
    margin: 0;
}

.ir-dresscode__palette {
    margin-top: 56px;
}
.ir-dresscode__palette-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 500;
    color: var(--tch-bg);
    margin: 0 0 32px;
}
.ir-dresscode__palette-mark {
    color: var(--tch-accent);
    font-size: 0.9rem;
    opacity: 0.7;
}
.ir-dresscode__palette-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 560px;
    margin: 0 auto;
}
.ir-dresscode__gem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ir-dresscode__gem-circle {
    width: 56px;
    height: 56px;
    display: block;
    border: 2px solid var(--tch-accent);
    box-shadow:
        0 0 0 4px var(--ir-velvet-deep),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 4px 12px rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.4s var(--ir-ease-spring);
}
.ir-dresscode__gem:hover .ir-dresscode__gem-circle {
    transform: rotate(45deg) scale(1.12);
}
.ir-dresscode__gem-label {
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tch-bg), transparent 25%);
    padding-left: 0.24em;
}

/* ═════════════════════════════════════════════════════════════════════════════
   CALENDRIER ROYAL — Sphère armillaire (anneaux entrelacés or)
   Le widget .inv2-calendar enveloppé dans une sphère armillaire céleste.
   Boutons Google/Outlook/Apple stylisés en anneaux d'orbite.
   ───────────────────────────────────────────────────────────────────────────── */

html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar {
    position: relative;
    max-width: 720px;
    margin: 60px auto 0;
    padding: 40px 24px;
    background: transparent;
    border: none;
    text-align: center;
    overflow: visible;
}

/* Sphère armillaire — 3 anneaux entrelacés en arrière-plan */
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(280px, 50vw, 420px);
    height: clamp(280px, 50vw, 420px);
    transform: translate(-50%, -50%);
    background-image:
    /* Anneau équatorial (horizontal) */ url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><ellipse cx='100' cy='100' rx='95' ry='95' fill='none' stroke='%23D4AF37' stroke-width='1' opacity='0.55'/><ellipse cx='100' cy='100' rx='95' ry='30' fill='none' stroke='%23D4AF37' stroke-width='0.8' opacity='0.5'/><ellipse cx='100' cy='100' rx='30' ry='95' fill='none' stroke='%23D4AF37' stroke-width='0.8' opacity='0.5'/><ellipse cx='100' cy='100' rx='95' ry='60' fill='none' stroke='%23B8962E' stroke-width='0.5' opacity='0.4' transform='rotate(20 100 100)'/><ellipse cx='100' cy='100' rx='60' ry='95' fill='none' stroke='%23B8962E' stroke-width='0.5' opacity='0.4' transform='rotate(-20 100 100)'/><circle cx='100' cy='100' r='4' fill='%23D4AF37'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.65;
    animation: ir-armillary-rotate 60s linear infinite;
    z-index: 0;
}
@keyframes ir-armillary-rotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Étoile centrale au cœur de la sphère */
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at 35% 35%,
        #fff8d8 0%,
        var(--tch-accent) 60%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow: 0 0 20px color-mix(in srgb, var(--tch-accent) 80%, transparent);
    pointer-events: none;
    z-index: 1;
    animation: ir-armillary-star-pulse 3.5s ease-in-out infinite;
}
@keyframes ir-armillary-star-pulse {
    0%,
    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__header {
    position: relative;
    z-index: 2;
    margin-bottom: 32px;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1.4rem, 3.6vw, 1.9rem);
    font-weight: 500;
    color: var(--tch-accent);
    margin: 0 0 8px;
    text-shadow: 0 0 14px color-mix(in srgb, var(--tch-accent) 40%, transparent);
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__title-icon {
    color: var(--tch-accent);
    margin-right: 8px;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__subtitle {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--tch-bg), transparent 30%);
    margin: 0;
}

/* Boutons en anneaux d'orbite — disposés en arc */
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__buttons {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: color-mix(in srgb, var(--tch-primary) 85%, transparent);
    color: var(--tch-accent);
    font-family: var(--inv2-font-title);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--tch-accent);
    border-radius: 30px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 0 3px color-mix(in srgb, var(--tch-primary) 60%, transparent),
        0 0 0 4px color-mix(in srgb, var(--tch-accent) 30%, transparent);
    transition:
        background 0.3s var(--ir-ease-out),
        color 0.3s var(--ir-ease-out),
        transform 0.3s var(--ir-ease-spring),
        box-shadow 0.3s var(--ir-ease-out);
    backdrop-filter: blur(6px);
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__btn:hover {
    background: linear-gradient(
        135deg,
        var(--tch-accent) 0%,
        var(--tch-accent-hover) 100%
    );
    color: var(--tch-primary);
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 8px 28px color-mix(in srgb, var(--tch-accent) 45%, transparent),
        0 0 0 3px color-mix(in srgb, var(--tch-primary) 60%, transparent),
        0 0 0 4px color-mix(in srgb, var(--tch-accent) 70%, transparent);
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__btn-icon {
    font-size: 1.1rem;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar__btn-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    opacity: 0.7;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar::before,
    html:has(.invitation-wrapper[data-theme="royal"]) .inv2-calendar::after {
        animation: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   LE DÉCRET ROYAL — Annonce solennelle en parchemin data-driven
   ───────────────────────────────────────────────────────────────────────────── */

.ir-decree {
    position: relative;
    padding: clamp(60px, 10vh, 100px) 20px;
    display: flex;
    justify-content: center;
}
.ir-decree__parchment {
    position: relative;
    max-width: 720px;
    padding: 56px 48px 64px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.20 0 0 0 0.15 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
        radial-gradient(
            ellipse 14% 9% at 22% 28%,
            rgba(120, 80, 30, 0.07) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 10% 7% at 76% 70%,
            rgba(120, 80, 30, 0.06) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 100% 60% at 50% 0%,
            rgba(255, 245, 220, 0.06) 0%,
            transparent 70%
        ),
        linear-gradient(180deg, #f5e8c9 0%, #e8d9b0 50%, #dcc899 100%);
    color: #3d2817;
    border: 1px solid color-mix(in srgb, var(--tch-accent) 60%, transparent);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 60px 120px -40px rgba(0, 0, 0, 0.35),
        inset 0 0 80px rgba(139, 90, 30, 0.18);
    text-align: center;
}
.ir-decree__roll {
    position: absolute;
    left: -8px;
    right: -8px;
    height: 24px;
    background: linear-gradient(180deg, #dcc899 0%, #b89968 50%, #dcc899 100%);
    border: 1px solid rgba(139, 90, 30, 0.4);
    box-shadow:
        inset 0 0 4px rgba(139, 90, 30, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.2);
}
.ir-decree__roll--top {
    top: -12px;
    border-radius: 2px 2px 0 0;
}
.ir-decree__roll--bottom {
    bottom: -12px;
    border-radius: 0 0 2px 2px;
}

.ir-decree__header {
    margin-bottom: 32px;
}
.ir-decree__crown {
    display: inline-block;
    width: 60px;
    height: 30px;
    margin-bottom: 12px;
}
.ir-decree__title {
    font-family: var(--inv2-font-title);
    font-size: clamp(1.8rem, 4.5vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* --tch-primary garantit le contraste sombre sur le parchemin clair
       quelle que soit la palette mariage (cf. notes sur .ir-decree-hero__title). */
    color: var(--tch-primary);
    margin: 0 0 6px;
    padding-left: 0.16em;
}
.ir-decree__date-stamp {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    color: color-mix(in srgb, var(--tch-primary) 70%, transparent);
}

.ir-decree__body {
    font-family: var(--inv2-font-display);
    line-height: 1.8;
}
.ir-decree__intro {
    font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(61, 40, 23, 0.7);
    margin: 0 0 14px;
}
.ir-decree__couple {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 14px 0;
}
.ir-decree__couple-prefix {
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(61, 40, 23, 0.7);
}
.ir-decree__couple-name {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    color: var(--tch-primary);
    line-height: 1.1;
}
.ir-decree__text {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    color: #3d2817;
    margin: 18px 0;
}
.ir-decree__text strong {
    color: var(--tch-primary);
    font-weight: 600;
}
.ir-decree__date,
.ir-decree__location {
    font-style: italic;
    font-weight: 600;
    color: var(--tch-primary);
}
.ir-decree__closing {
    margin-top: 24px;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: color-mix(in srgb, var(--tch-primary) 85%, transparent);
}

.ir-decree__seal {
    position: absolute;
    bottom: -32px;
    right: 32px;
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
    transform: rotate(-8deg);
}

@media (max-width: 640px) {
    .ir-decree__parchment {
        padding: 40px 24px 56px;
    }
    .ir-decree__seal {
        right: 16px;
        width: 64px;
        height: 64px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   RSVP ROYAL — Wrapper avec header solennel autour du formulaire parent
   ───────────────────────────────────────────────────────────────────────────── */

.ir-rsvp-royal-wrap {
    position: relative;
    padding: clamp(40px, 6vh, 60px) 20px 0;
    text-align: center;
}
.ir-rsvp-royal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}
.ir-rsvp-royal-header__dash {
    position: relative;
    flex: 0 0 80px;
    height: 12px;
}
.ir-rsvp-royal-header__dash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #d4af37,
        transparent
    );
}
.ir-rsvp-royal-header__dash::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #d4af37;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px color-mix(in srgb, #d4af37 50%, transparent);
}
.ir-rsvp-royal-header__title {
    font-family: var(--inv2-font-display);
    font-size: clamp(1.7rem, 4.2vw, 2.3rem);
    font-weight: 500;
    font-style: italic;
    color: #d4af37;
    margin: 0;
}
.ir-rsvp-royal-lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1rem, 2.6vw, 1.18rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 22%);
    margin: 0 auto 12px;
    max-width: 520px;
    line-height: 1.6;
}
.ir-rsvp-royal-sub {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--tch-bg), transparent 45%);
    margin: 0 auto 24px;
    max-width: 460px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ir-rsvp-royal-sub__ornament {
    color: #d4af37;
    opacity: 0.6;
    font-size: 0.8em;
}

/* Restyling royal du formulaire RSVP existant (sélecteurs `.invitation-wrapper .inv-rsvp`).
   Fond velours dérive de --tch-primary (palette mariage), accents or hardcodés (identité royale). */
.invitation-wrapper .inv-rsvp {
    background:
        radial-gradient(
            ellipse 80% 50% at 50% 0%,
            color-mix(in srgb, #d4af37 10%, transparent) 0%,
            transparent 60%
        ),
        color-mix(in srgb, var(--tch-primary) 60%, transparent);
    border: 1px solid color-mix(in srgb, #d4af37 30%, transparent);
}
.invitation-wrapper .inv-rsvp__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    color: #d4af37;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RSVP ROYAL v2 — « Les Sceaux d'Honneur »
   ═══════════════════════════════════════════════════════════════════════════
   Direction artistique : chaque événement devient un PARCHEMIN SCELLABLE.
   Les trois boutons Oui/Peut-être/Non deviennent trois SCEAUX DE CIRE à
   apposer — or massif, argent ciselé, cire vierge — chacun avec sa propre
   gravure (couronne ✓ pour oui, étoile ✦ pour peut-être, croix discrète
   pour non).

   Au clic, le sceau choisi s'imprime sur le parchemin avec une animation
   de pression (scale-down + flash doré + particules), les deux autres se
   retirent en fantôme (blur + opacity réduite). Effet « dopamine du sceau
   royal apposé ».

   Tous les sélecteurs en `body.theme-royal-page` — spécificité maximale,
   override fiable.
   ═══════════════════════════════════════════════════════════════════════════ */

body.theme-royal-page .inv-rsvp-section {
    /* Or — couleurs HARDCODÉES, identité visuelle royale invariante (même pattern
       que .ir-programme avec --pgm-r-gold-*). Le « royal » reste royal quelle que
       soit la palette du mariage : les filets, les cartouches, les ornements gardent
       leur éclat doré signature. Seul le velours (ci-dessous) suit la palette mariage. */
    --rsvp-r-gold-h: #fff1b8;
    --rsvp-r-gold: #d4af37;
    --rsvp-r-gold-d: #7a5b1a;
    --rsvp-r-gold-soft: color-mix(in srgb, #d4af37 30%, transparent);

    /* Velours — dérive de --tch-primary, alignement exact avec les cartes
       du Programme (.ir-programme__card) pour cohérence visuelle entre sections.
       Ce sont les mêmes fonds que les plaques gravées du Programme. */
    --rsvp-r-velvet-h: color-mix(in srgb, var(--tch-primary) 75%, #000);
    --rsvp-r-velvet: color-mix(in srgb, var(--tch-primary) 75%, #000);
    --rsvp-r-velvet-d: color-mix(in srgb, var(--tch-primary) 60%, #000);

    /* Argent — métal neutre universel (hiérarchie : or > argent > cire).
       Reste indépendant du thème puisqu'il signifie « second choix ». */
    --rsvp-r-silver-h: #f5f5f5;
    --rsvp-r-silver: #b8b8b8;
    --rsvp-r-silver-d: #6b6b6b;

    --rsvp-r-seal-size: 72px;
}

/* ─── PARCHEMIN ─── Chaque événement devient une plaque scellable.
   Fond aligné exactement sur .ir-programme__card (cohérence inter-sections). */
body.theme-royal-page .inv-event {
    position: relative;
    background:
        /* Texture fine de parchemin (lignes 45°) — identique au Programme */
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 12px,
            rgba(244, 217, 123, 0.04) 12px,
            rgba(244, 217, 123, 0.04) 13px
        ),
        /* Fond velours profond — dérive de --tch-primary, même formule que le Programme */
        linear-gradient(
                135deg,
                color-mix(in srgb, var(--tch-primary) 75%, #000) 0%,
                color-mix(in srgb, var(--tch-primary) 60%, #000) 100%
            );
    border: none;
    border-radius: 4px;
    padding: 28px 24px 24px;
    margin-bottom: 20px;
    /* Double filet doré encadrant + ornements coins (fleur-de-lys).
       Or hardcodé (identité royale) — même pattern que .ir-programme__card. */
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #d4af37, transparent 45%),
        inset 0 0 0 4px color-mix(in srgb, var(--rsvp-r-velvet-d) 85%, #000),
        inset 0 0 0 5px color-mix(in srgb, #d4af37, transparent 30%),
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(58, 8, 16, 0.6);
    transition:
        box-shadow 0.5s var(--ir-ease-out),
        transform 0.5s var(--ir-ease-spring);
}

/* Ornements fleur-de-lys aux 4 coins du parchemin */
body.theme-royal-page .inv-event::before,
body.theme-royal-page .inv-event::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%23d4af37'><path d='M7 1.5 L8.4 5.2 L7 7 L5.6 5.2 Z M1.5 7 L5.2 8.4 L7 7 L5.2 5.6 Z M12.5 7 L8.8 8.4 L7 7 L8.8 5.6 Z M7 12.5 L8.4 8.8 L7 7 L5.6 8.8 Z'/></svg>")
        no-repeat center / contain;
    opacity: 0.75;
    pointer-events: none;
}
body.theme-royal-page .inv-event::before {
    top: 9px;
    left: 9px;
}
body.theme-royal-page .inv-event::after {
    bottom: 9px;
    right: 9px;
}

/* ─── EN-TÊTE PARCHEMIN ─── Cartouche heure + titre événement ─── */
body.theme-royal-page .inv-event__top {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
    text-align: center;
}

/* Cartouche horaire — calqué sur .ir-programme__card-time pour cohérence
   inter-sections : cadre bordeaux semi-transparent, bordure or fine, texte or,
   icône horloge en ::before (le HTML partagé show_v2 n'a pas de <i>). */
body.theme-royal-page .inv-event__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    border: 1px solid color-mix(in srgb, #d4af37, transparent 60%);
    border-radius: 2px;
    background: rgba(58, 8, 16, 0.25);
    color: var(--rsvp-r-gold-h);
    font-family: var(--inv2-font-title);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: none;
    clip-path: none;
    box-shadow: none;
}
body.theme-royal-page .inv-event__badge::before {
    content: "";
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d4af37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.5'/><polyline points='8 4.5 8 8 10.5 9.5'/></svg>")
        no-repeat center / contain;
}

/* Titre événement → italique grand en or dégradé */
body.theme-royal-page .inv-event__name {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1.35rem, 3.5vw, 1.7rem);
    line-height: 1.2;
    margin: 0;
    background: linear-gradient(
        135deg,
        var(--tch-bg) 0%,
        var(--rsvp-r-gold-h) 50%,
        var(--tch-bg) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Question d'engagement — ivoire avec transparence (cohérent avec la lede du
   header RSVP). Le parchemin dérive de --tch-primary, donc tout texte qui en
   dépend devient invisible : on bascule sur --tch-bg, indépendant de la palette. */
body.theme-royal-page .inv-event__question {
    text-align: center;
    font-family: var(--inv2-font-title);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tch-bg), transparent 40%);
    margin: 0 0 22px;
    padding-left: 0.22em;
}

/* ─── LES TROIS SCEAUX ─── Boutons transformés en sceaux de cire ─── */
body.theme-royal-page .inv-responses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    justify-items: center;
    margin: 0 auto;
    max-width: 380px;
}

body.theme-royal-page .inv-resp-btn {
    /* Reset complet du style générique */
    all: unset;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--rsvp-r-seal-size);
    height: var(--rsvp-r-seal-size);
    border-radius: 50%;
    font-family: var(--inv2-font-title);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    /* Anneau métallique encadré */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -3px 8px rgba(0, 0, 0, 0.35),
        0 0 0 2px var(--rsvp-r-velvet-d),
        0 0 0 3px color-mix(in srgb, #d4af37, transparent 60%),
        0 6px 16px rgba(0, 0, 0, 0.4);
    transition:
        transform 0.25s var(--ir-ease-spring),
        box-shadow 0.3s var(--ir-ease-out),
        filter 0.3s var(--ir-ease-out);
    will-change: transform;
    outline: none;
    /* L'étiquette texte sous le sceau (sera dans pseudo) */
}

/* Sceau OR — réponse "Oui" : massif, doré, gravure couronne + check */
body.theme-royal-page .inv-resp-btn--yes {
    background: radial-gradient(
        circle at 32% 28%,
        var(--rsvp-r-gold-h) 0%,
        var(--rsvp-r-gold) 50%,
        var(--rsvp-r-gold-d) 100%
    );
    color: var(--rsvp-r-velvet-d);
    text-shadow: 0 1px 0 rgba(255, 248, 216, 0.45);
}

/* Sceau ARGENT — réponse "Peut-être" : argent ciselé */
body.theme-royal-page .inv-resp-btn--maybe {
    background: radial-gradient(
        circle at 32% 28%,
        var(--rsvp-r-silver-h) 0%,
        var(--rsvp-r-silver) 55%,
        var(--rsvp-r-silver-d) 100%
    );
    color: var(--rsvp-r-velvet-d);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Sceau VIERGE — réponse "Non" : cire pourpre seule, gravure discrète */
body.theme-royal-page .inv-resp-btn--no {
    background: radial-gradient(
        circle at 32% 28%,
        var(--rsvp-r-velvet-h) 0%,
        var(--rsvp-r-velvet) 55%,
        var(--rsvp-r-velvet-d) 100%
    );
    color: rgba(244, 217, 123, 0.85);
    text-shadow: 0 1px 0 rgba(58, 8, 16, 0.6);
}

/* Symboles intérieurs des sceaux — pseudo-élément ::before */
body.theme-royal-page .inv-resp-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-position: center 32%;
    background-repeat: no-repeat;
    background-size: 36%;
}
/* OUI : couronne royale gravée */
body.theme-royal-page .inv-resp-btn--yes::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a0810'><path d='M2 18 L4 8 L8 12 L12 4 L16 12 L20 8 L22 18 Z M2 21 L22 21 L22 19 L2 19 Z'/></svg>");
}
/* PEUT-ÊTRE : étoile à 6 branches */
body.theme-royal-page .inv-resp-btn--maybe::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233a0810'><path d='M12 2 L14 9 L21 9 L15.5 13.5 L17.5 21 L12 16.5 L6.5 21 L8.5 13.5 L3 9 L10 9 Z'/></svg>");
}
/* NON : croix de Saint-André subtile */
body.theme-royal-page .inv-resp-btn--no::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round'><path d='M6 6 L18 18 M18 6 L6 18'/></svg>");
}

/* Label texte sous le sceau (le contenu original du bouton) */
body.theme-royal-page .inv-resp-btn > * {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}
/* Cache les SVG check / icônes intégrés au bouton (déjà remplacés par ::before) */
body.theme-royal-page .inv-resp-btn .inv2-check-svg,
body.theme-royal-page .inv-resp-btn .fa-question,
body.theme-royal-page .inv-resp-btn .fa-times {
    display: none;
}

/* HOVER : le sceau se lève + halo selon couleur */
body.theme-royal-page .inv-resp-btn:hover {
    transform: translateY(-4px) scale(1.06);
}
body.theme-royal-page .inv-resp-btn--yes:hover {
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -3px 8px rgba(0, 0, 0, 0.35),
        0 0 0 2px var(--rsvp-r-velvet-d),
        0 0 0 3px var(--rsvp-r-gold),
        0 12px 28px color-mix(in srgb, #d4af37, transparent 55%),
        0 0 32px rgba(244, 217, 123, 0.4);
}
body.theme-royal-page .inv-resp-btn--maybe:hover {
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -3px 8px rgba(0, 0, 0, 0.35),
        0 0 0 2px var(--rsvp-r-velvet-d),
        0 0 0 3px var(--rsvp-r-silver-h),
        0 12px 28px rgba(184, 184, 184, 0.5);
}
body.theme-royal-page .inv-resp-btn--no:hover {
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -3px 8px rgba(0, 0, 0, 0.4),
        0 0 0 2px var(--rsvp-r-velvet-d),
        0 0 0 3px color-mix(in srgb, var(--tch-primary), transparent 40%),
        0 12px 28px rgba(106, 14, 30, 0.5);
}

/* CLIC = IMPRESSION : le sceau tombe et s'écrase brièvement */
body.theme-royal-page .inv-resp-btn:active {
    transform: translateY(2px) scale(0.94);
    transition-duration: 0.1s;
}

/* ─── ÉTAT SELECTED — Le sceau est apposé, les autres se retirent ─── */
body.theme-royal-page .inv-resp-btn.selected {
    animation: rsvp-r-seal-stamp 0.7s var(--ir-ease-spring) both;
    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.35),
        inset 0 -4px 10px rgba(0, 0, 0, 0.4),
        0 0 0 2px var(--rsvp-r-velvet-d),
        0 0 0 4px var(--rsvp-r-gold-h),
        0 0 0 6px var(--rsvp-r-velvet-d),
        0 14px 32px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(244, 217, 123, 0.55);
    z-index: 2;
}
@keyframes rsvp-r-seal-stamp {
    0% {
        transform: translateY(-12px) scale(1.18) rotate(-6deg);
    }
    35% {
        transform: translateY(4px) scale(0.88) rotate(3deg);
    }
    65% {
        transform: translateY(-2px) scale(1.04) rotate(-1deg);
    }
    100% {
        transform: translateY(0) scale(1) rotate(0);
    }
}

/* Les sceaux NON-CHOISIS dans un événement avec sélection : fantômes */
body.theme-royal-page
    .inv-responses:has(.inv-resp-btn.selected)
    .inv-resp-btn:not(.selected) {
    opacity: 0.32;
    filter: grayscale(0.7) blur(0.5px);
    pointer-events: auto;
    transform: scale(0.92);
    transition:
        opacity 0.5s,
        filter 0.5s,
        transform 0.5s;
}

/* PARCHEMIN d'un événement répondu : teinté + filigrane plus brillant */
body.theme-royal-page .inv-event--yes,
body.theme-royal-page .inv-event:has(.inv-resp-btn--yes.selected) {
    background:
        /* Texture or plus marquée (0.07) signe l'événement « répondu OUI » */
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 12px,
            rgba(244, 217, 123, 0.07) 12px,
            rgba(244, 217, 123, 0.07) 13px
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--tch-primary) 75%, #000) 0%,
            color-mix(in srgb, var(--tch-primary) 60%, #000) 100%
        );
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #d4af37, transparent 15%),
        inset 0 0 0 4px color-mix(in srgb, var(--rsvp-r-velvet-d) 85%, #000),
        inset 0 0 0 5px rgba(255, 241, 184, 0.95),
        0 14px 36px rgba(0, 0, 0, 0.5),
        0 0 32px color-mix(in srgb, #d4af37, transparent 75%);
}

/* ─── PROGRESSION ─── Le ring devient un médaillon doré ─── */
body.theme-royal-page .inv2-progress-ring {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    filter: drop-shadow(
            0 0 12px color-mix(in srgb, #d4af37, transparent 70%)
        )
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}
body.theme-royal-page .inv2-progress-ring svg {
    width: 100%;
    height: 100%;
}
body.theme-royal-page .inv2-progress-ring__bg {
    stroke: rgba(58, 8, 16, 0.6);
    stroke-width: 6;
}
body.theme-royal-page .inv2-progress-ring__fill {
    stroke: url(#royal-rsvp-progress-grad);
    stroke-width: 6;
}
body.theme-royal-page .inv2-progress-ring__text {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 1.45rem;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        var(--rsvp-r-gold-h),
        var(--rsvp-r-gold)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ─── TITRE RSVP ─── Italique grand or ─── */
body.theme-royal-page .inv-rsvp__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1.7rem, 4.5vw, 2.3rem);
    background: linear-gradient(
        135deg,
        var(--tch-bg) 0%,
        var(--rsvp-r-gold-h) 50%,
        var(--tch-bg) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0 0 10px;
}
body.theme-royal-page .inv-rsvp__subtitle {
    color: color-mix(in srgb, var(--tch-bg), transparent 35%);
    font-style: italic;
    font-family: var(--inv2-font-display);
    font-size: 1rem;
    max-width: 460px;
    margin: 0 auto 24px;
}

/* ─── CONTENEUR DES ÉVÉNEMENTS — padding et fond plus discret ─── */
body.theme-royal-page #eventsContainer {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 4px;
}

/* ─── MOBILE (<768px) ─── Compaction sans perdre la lisibilité ─── */
@media (max-width: 767px) {
    body.theme-royal-page .inv-event {
        padding: 24px 18px 20px;
        margin-bottom: 16px;
    }
    body.theme-royal-page .inv-responses {
        gap: 10px;
        max-width: 320px;
    }
    body.theme-royal-page .inv-resp-btn {
        --rsvp-r-seal-size: 64px;
    }
    body.theme-royal-page .inv-resp-btn::before {
        background-size: 32%;
    }
    body.theme-royal-page .inv-resp-btn > * {
        font-size: 0.55rem;
        bottom: 13%;
    }
    body.theme-royal-page .inv-event__name {
        font-size: 1.25rem;
    }
    body.theme-royal-page .inv-event__badge {
        font-size: 0.82rem;
        padding: 5px 14px;
    }
}

/* ─── ACCESSIBILITÉ ─── */
@media (prefers-reduced-motion: reduce) {
    body.theme-royal-page .inv-resp-btn,
    body.theme-royal-page .inv-resp-btn:hover,
    body.theme-royal-page .inv-resp-btn.selected,
    body.theme-royal-page .inv-event {
        animation: none;
        transition: none;
    }
}

/* Focus visible accessibilité — anneau or autour du sceau */
body.theme-royal-page .inv-resp-btn:focus-visible {
    outline: 3px solid var(--rsvp-r-gold-h);
    outline-offset: 4px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   WIDGETS ROYAL — Identité forte cohérente "cour royale céleste"
   Music = boîte à musique, WhatsApp = missive scellée, Scroll-nav = couronne,
   Progress = sertie de gemmes, Cursor = bague royale.
   Tous scopés sous `.invitation-wrapper` pour ne pas affecter autres thèmes.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET MUSIQUE ROYAL v4 — « Le Disque Royal »
   ═══════════════════════════════════════════════════════════════════════════
   Direction artistique : un disque rond ornementé, propre et moderne.
   La forme ronde évoque immédiatement la musique (vinyle, disque, médaillon).
   L'identité royale émane d'une triple couronne d'anneaux : velours carmin
   profond → cordon or → velours intérieur → cœur or massif avec clé de sol
   géante SVG inline.
   Position : ancré sous la barre de progression au coin haut-droit, propre
   et discret comme une vraie montre de gousset suspendue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Palette + géométrie locales — variables dérivées des couleurs mariage
   pour suivre automatiquement le toggle de palette sur la page démo.
   Le widget devient un PHONOGRAPHE ROYAL : pavillon évasé incliné +
   col + vinyle à la base. Dimensions hauteur > largeur. */
body.theme-royal-page .inv-bg-music {
    --r-gold-h: color-mix(in srgb, var(--tch-accent) 55%, #ffffff);
    --r-gold: var(--tch-accent);
    --r-gold-d: color-mix(in srgb, var(--tch-accent) 55%, #000000);
    --r-gold-deepest: color-mix(in srgb, var(--tch-accent) 30%, #000000);
    --r-velvet-h: color-mix(in srgb, var(--tch-primary) 65%, #ffffff);
    --r-velvet: var(--tch-primary);
    --r-velvet-d: color-mix(in srgb, var(--tch-primary) 55%, #000000);
    --r-disc-size: 80px;
    --r-phono-height: 92px;
}

/* ─── DESKTOP : top-left propre, sous la barre de progression ─── */
@media (min-width: 640px) {
    body.theme-royal-page .inv-bg-music {
        top: 274px;
        left: 104px;
        right: auto;
        bottom: auto;
    }
}

/* ─── LE PHONOGRAPHE ROYAL ───
   Le bouton devient un conteneur transparent qui compose le phonographe
   à partir de ses span internes. Hauteur > largeur (proportions
   réalistes d'un gramophone). Le drop-shadow donne le poids/ombre
   au sol, pas de border-radius forme circulaire imposée. */
body.theme-royal-page .inv-bg-music__btn {
    position: relative;
    width: var(--r-disc-size);
    height: var(--r-phono-height);
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(
        0 14px 22px color-mix(in srgb, var(--r-velvet-d) 60%, transparent)
    );
    transition:
        transform 0.4s var(--ir-ease-spring),
        filter 0.35s var(--ir-ease-out);
    overflow: visible;
    will-change: transform, filter;
    padding: 0;
    cursor: pointer;
}

/* ─── FINIAL ROYAL ───
   Petit ornement au-dessus du pavillon : 3 fleurs-de-lys miniatures qui
   couronnent le sommet du phonographe. Plus discret qu'une vraie
   couronne, cohérent avec la silhouette gramophone. */
body.theme-royal-page .inv-bg-music__btn::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-58%) rotate(-12deg);
    width: 60%;
    height: 14px;
    background:
        radial-gradient(
            ellipse at 50% 30%,
            var(--r-gold-h) 0%,
            var(--r-gold) 50%,
            var(--r-gold-d) 100%
        );
    clip-path: polygon(
        0% 100%,
        12% 60%,
        20% 100%,
        30% 25%,
        38% 100%,
        50% 0%,
        62% 100%,
        70% 25%,
        80% 100%,
        88% 60%,
        100% 100%
    );
    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 4px color-mix(in srgb, var(--r-gold) 50%, transparent));
    pointer-events: none;
    z-index: 4;
}

/* ─── HALO AMBIANT IRISÉ — Conic-gradient famille or à l'arrière-plan
   du phonographe en lecture. Reste sous le widget pour ne pas masquer
   les ondes sonores qui jaillissent à droite. ─── */
body.theme-royal-page .inv-bg-music__btn::after {
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--r-gold-h) 60%, #ffd0a0) 40deg,
        color-mix(in srgb, var(--r-gold) 70%, #ff9966) 80deg,
        transparent 130deg,
        color-mix(in srgb, var(--r-gold-h) 55%, #ffeebb) 180deg,
        color-mix(in srgb, var(--r-gold) 65%, #ffccaa) 220deg,
        transparent 270deg,
        color-mix(in srgb, var(--r-gold-h) 70%, #fff8e0) 320deg,
        transparent 360deg
    );
    filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: -2;
    transition: opacity 0.6s var(--ir-ease-out);
}
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn::after {
    opacity: 1;
    animation: r-disc-halo 10s linear infinite;
}
@keyframes r-disc-halo {
    to {
        transform: rotate(360deg);
    }
}

/* ─── CLÉ DE SOL GÉANTE AU CENTRE — SVG inline doré ───
   La clé de sol est le symbole UNIVERSEL de la musique. Dessin SVG robuste,
   rendu pixel-perfect identique sur tous navigateurs, indépendant des
   polices système. */
/* ═══════════════════════════════════════════════════════════════════════
   PAVILLON (BELL) — .jewel devient le cornet évasé du phonographe.
   Trapèze incliné -12° avec dégradé radial or pour suggérer la courbure
   intérieure du métal. Bord supérieur plus large que la base (forme
   classique de gramophone). Clip-path définit la silhouette.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__jewel {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-52%) rotate(-12deg);
    transform-origin: 50% 100%;
    width: 92%;
    height: 56%;
    border-radius: 0;
    background:
        /* éclat brillant haut-gauche pour le métal poli */
        radial-gradient(
            ellipse at 28% 18%,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(255, 255, 255, 0) 28%
        ),
        /* dégradé sombre droite-bas pour la profondeur */
        radial-gradient(
            ellipse at 80% 95%,
            color-mix(in srgb, var(--r-gold-deepest) 85%, transparent) 0%,
            transparent 50%
        ),
        /* corps du pavillon en gold */
        linear-gradient(
            135deg,
            var(--r-gold-h) 0%,
            var(--r-gold) 35%,
            var(--r-gold-d) 75%,
            var(--r-gold-deepest) 100%
        );
    /* Silhouette de pavillon : top évasé, descend en cône vers la base */
    clip-path: polygon(
        2% 0%,      /* coin supérieur-gauche du pavillon */
        98% 0%,     /* coin supérieur-droit */
        92% 8%,     /* début courbure droite */
        78% 32%,
        66% 58%,
        56% 82%,
        52% 100%,   /* base droite (cou) */
        48% 100%,   /* base gauche (cou) */
        44% 82%,
        34% 58%,
        22% 32%,
        8% 8%       /* fin courbure gauche */
    );
    filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
    display: block;
    overflow: visible;
    animation: none;
    z-index: 2;
}
/* CAVITÉ INTÉRIEURE du pavillon — .jewel::before crée la zone sombre
   à l'intérieur de l'ouverture qui suggère la profondeur acoustique. */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__jewel::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 12%;
    width: 76%;
    height: 50%;
    background: radial-gradient(
        ellipse at 50% 30%,
        var(--r-velvet-d) 0%,
        color-mix(in srgb, var(--r-velvet-d) 80%, #000) 60%,
        #000 100%
    );
    clip-path: polygon(
        0% 0%,
        100% 0%,
        88% 30%,
        74% 60%,
        62% 100%,
        38% 100%,
        26% 60%,
        12% 30%
    );
    pointer-events: none;
    z-index: 2;
}
/* CERCLE DORÉ AUTOUR DE L'OUVERTURE — épaisseur dorée qui souligne
   le pourtour supérieur du pavillon (le bord épais d'un vrai cornet). */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__jewel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    background: linear-gradient(
        180deg,
        var(--r-gold-h) 0%,
        var(--r-gold) 60%,
        var(--r-gold-d) 100%
    );
    clip-path: polygon(
        0% 0%,
        100% 0%,
        94% 100%,
        6% 100%
    );
    pointer-events: none;
    z-index: 3;
}
/* ═══════════════════════════════════════════════════════════════════════
   COL (THROAT) — .center devient le tube qui descend du pavillon
   jusqu'au vinyle. Bandeau étroit gold avec léger reflet vertical.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__center {
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translateX(-50%);
    width: 14%;
    height: 22%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(
        90deg,
        var(--r-gold-d) 0%,
        var(--r-gold-h) 50%,
        var(--r-gold-d) 100%
    );
    box-shadow:
        inset 0 2px 0 color-mix(in srgb, var(--r-gold-h) 90%, transparent),
        inset 0 -3px 4px rgba(0, 0, 0, 0.4);
    z-index: 1;
}
/* Anneau décoratif central sur le col (jonction décorative) */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__center::before {
    content: "";
    position: absolute;
    top: 40%;
    left: -20%;
    width: 140%;
    height: 16%;
    background: linear-gradient(
        180deg,
        var(--r-gold-h) 0%,
        var(--r-gold) 50%,
        var(--r-gold-d) 100%
    );
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
/* Cache la note FA d'origine */
body.theme-royal-page .inv-bg-music__btn .fa-music {
    font-size: 0;
    line-height: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
   VINYLE À LA BASE — .shine devient le disque vinyle ovale (perspective
   3D vue de dessus/biais) qui sert d'assise au phonographe. Bordeaux
   profond avec cercles concentriques dorés et label central or.
   Tourne lentement quand la musique joue.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__shine {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    height: 22%;
    border-radius: 50%;
    background:
        /* label central or */
        radial-gradient(
            ellipse at 50% 50%,
            var(--r-gold-h) 0%,
            var(--r-gold) 18%,
            transparent 22%
        ),
        /* sillons concentriques bordeaux */
        repeating-radial-gradient(
            ellipse at 50% 50%,
            color-mix(in srgb, var(--r-velvet-d) 95%, #000) 0,
            color-mix(in srgb, var(--r-velvet) 85%, #000) 2px,
            color-mix(in srgb, var(--r-velvet-d) 95%, #000) 4px
        );
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.6),
        inset 0 2px 0 color-mix(in srgb, var(--r-velvet-h) 70%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 0 1.5px var(--r-gold);
    pointer-events: none;
    z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════════════
   CORDONNET DÉCORATIF — .grooves devient un fin filet de fioritures
   dorées qui contourne la base du phonographe (la « plinthe »).
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__grooves {
    display: block;
    position: absolute;
    bottom: 19%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 4%;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--r-gold-d) 8%,
        var(--r-gold-h) 50%,
        var(--r-gold-d) 92%,
        transparent 100%
    );
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 1;
}
/* En lecture : le vinyle tourne lentement */
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__shine {
    animation: r-vinyl-spin 6s linear infinite;
}
@keyframes r-vinyl-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ONDES SONORES — .progress devient 3 arcs concentriques qui jaillissent
   du pavillon dans la direction d'ouverture (haut-droite à cause du
   tilt -12° du pavillon). Visible uniquement en lecture, pulsation
   cyclique 1.4s. C'est la SIGNATURE du phonographe royal.
   Implémentation : 3 cercles avec border-color partiel + clip-path
   pour montrer juste un arc à 90°.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__progress {
    display: block;
    position: absolute;
    top: -12%;
    right: -32%;
    width: 60%;
    height: 60%;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s var(--ir-ease-out);
    /* 3 arcs concentriques via border + clip-path */
    background:
        radial-gradient(
            circle at 0% 100%,
            transparent 0,
            transparent 28%,
            color-mix(in srgb, var(--r-gold-h) 90%, transparent) 28%,
            color-mix(in srgb, var(--r-gold-h) 90%, transparent) 30%,
            transparent 32%,
            transparent 48%,
            color-mix(in srgb, var(--r-gold-h) 75%, transparent) 48%,
            color-mix(in srgb, var(--r-gold-h) 75%, transparent) 50%,
            transparent 52%,
            transparent 68%,
            color-mix(in srgb, var(--r-gold-h) 55%, transparent) 68%,
            color-mix(in srgb, var(--r-gold-h) 55%, transparent) 70%,
            transparent 72%
        );
    /* Limite l'affichage à un quart de cercle (le quadrant haut-droit) */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    filter: drop-shadow(
        0 0 6px color-mix(in srgb, var(--r-gold-h) 60%, transparent)
    );
}
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__progress {
    opacity: 1;
    animation: r-sound-waves 1.6s var(--ir-ease-out) infinite;
}
@keyframes r-sound-waves {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Confetti burst, rayon céleste et rotation de la clé de sol :
   retirés. Ces effets appartenaient au design « disque sphérique »
   précédent. Le phonographe a sa propre identité (ondes sonores +
   vinyle qui tourne + finial), ne nécessite pas de doublon. */

/* ═══════════════════════════════════════════════════════════════════════
   AURA COSMIQUE — Halo or qui respire en permanence, s'amplifie en lecture.
   Premier appel à la dopamine : un objet vivant, jamais figé.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__aura {
    display: block;
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        color-mix(in srgb, var(--r-gold) 30%, transparent) 0%,
        color-mix(in srgb, var(--r-gold) 10%, transparent) 40%,
        transparent 72%
    );
    pointer-events: none;
    z-index: -3;
    animation: r-aura-breathe 4.5s var(--ir-ease-in-out) infinite;
    transition: background 0.6s var(--ir-ease-out);
}
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__aura {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--r-gold) 55%, transparent) 0%,
        color-mix(in srgb, var(--r-gold) 22%, transparent) 45%,
        transparent 78%
    );
    animation-duration: 2.6s;
}
@keyframes r-aura-breathe {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSTELLATION ORBITALE — 5 étoiles or qui gravitent quand la musique
   joue. Chaque étoile = un point sertie sur un anneau invisible qui
   tourne. Effet « célestes » royal.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__ring {
    display: block;
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.8s var(--ir-ease-out);
}
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle 2.2px at 50% 0%,    var(--r-gold-h) 60%, transparent 70%),
        radial-gradient(circle 1.6px at 96% 30%,   var(--r-gold) 60%,   transparent 70%),
        radial-gradient(circle 2.4px at 78% 88%,   var(--r-gold-h) 60%, transparent 70%),
        radial-gradient(circle 1.5px at 18% 92%,   var(--r-gold) 60%,   transparent 70%),
        radial-gradient(circle 2px   at 4% 28%,    var(--r-gold-h) 60%, transparent 70%);
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--r-gold-h) 80%, transparent));
    animation: r-stars-orbit 14s linear infinite;
}
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle 1.4px at 65% 8%,    var(--r-gold) 60%,   transparent 70%),
        radial-gradient(circle 1.8px at 92% 70%,   var(--r-gold-h) 60%, transparent 70%),
        radial-gradient(circle 1.2px at 35% 96%,   var(--r-gold) 60%,   transparent 70%),
        radial-gradient(circle 1.6px at 8% 60%,    var(--r-gold-h) 60%, transparent 70%);
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--r-gold-h) 70%, transparent));
    animation: r-stars-orbit-reverse 22s linear infinite;
}
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__ring {
    opacity: 1;
}
@keyframes r-stars-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes r-stars-orbit-reverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ONDE DE CIRE — Au tap/click, une onde velours se propage comme un
   sceau qui s'imprime. Récompense tactile dopaminergique (UX.md §4).
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn .inv-bg-music__ripple {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--r-gold-h) 70%, transparent) 0%,
        color-mix(in srgb, var(--r-gold) 25%, transparent) 50%,
        transparent 70%
    );
    pointer-events: none;
    opacity: 0;
    transform: scale(0.7);
    z-index: 0;
}
body.theme-royal-page .inv-bg-music__btn:active .inv-bg-music__ripple {
    animation: r-wax-ripple 0.55s var(--ir-ease-out);
}
@keyframes r-wax-ripple {
    0% {
        opacity: 0.9;
        transform: scale(0.4);
    }
    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   COURONNE VIVANTE — Les 5 pointes respirent au rythme de la musique.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music__btn::before {
    transform-origin: center bottom;
    animation: r-crown-breathe 3.4s var(--ir-ease-in-out) infinite;
}
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn::before {
    animation-duration: 1.8s;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 8px color-mix(in srgb, var(--r-gold-h) 65%, transparent));
}
@keyframes r-crown-breathe {
    0%, 100% {
        transform: translateX(-50%) scaleY(0.96);
    }
    50% {
        transform: translateX(-50%) scaleY(1.08);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CLÉ DE SOL ÉCLAIRÉE — En lecture, légère luminescence dorée.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__jewel {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--r-gold-h) 70%, transparent));
}

/* ─── HOVER : lift + glow + aura amplifiée ─── */
body.theme-royal-page .inv-bg-music__btn:hover {
    transform: translateY(-4px) scale(1.06);
    filter: drop-shadow(
        0 0 20px color-mix(in srgb, var(--r-gold-h) 85%, transparent)
    );
}
body.theme-royal-page .inv-bg-music__btn:hover .inv-bg-music__aura {
    transform: scale(1.18);
    opacity: 1;
}
/* Rotation hover de la clé de sol : retirée. .center est maintenant
   le col vertical du phonographe, ne se prête pas à la rotation. */

/* ─── ACTIVE : empreinte rapide ─── */
body.theme-royal-page .inv-bg-music__btn:active {
    transform: scale(0.94);
    transition-duration: 0.1s;
}

/* ═══════════════════════════════════════════════════════════════════════
   LÉVITATION DU PHONOGRAPHE — Le pavillon respire/balance subtilement
   en lecture. Anime le pavillon (.jewel) en COMPOSANT avec son transform
   de base (translateX(-52%) rotate(-12deg)) au lieu de l'écraser.
   ═══════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__jewel {
    animation: r-phono-sway 3.8s var(--ir-ease-in-out) infinite;
}
@keyframes r-phono-sway {
    0%, 100% {
        transform: translateX(-52%) translateY(0) rotate(-12deg);
    }
    50% {
        transform: translateX(-52%) translateY(-1.5px) rotate(-9deg);
    }
}

/* ─── ENTRÉE : le disque arrive avec un spin doré ─── */
@media (min-width: 640px) {
    body.theme-royal-page .inv-bg-music--visible .inv-bg-music__btn {
        animation: r-disc-arrive 1.2s var(--ir-ease-spring) 0.35s both;
    }
}
@keyframes r-disc-arrive {
    0% {
        transform: scale(0.4) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) rotate(15deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* La rotation du « cœur du disque » de l'ancien design est obsolète.
   Le vinyle (.shine) a sa propre rotation via r-vinyl-spin. */

/* ─── MOBILE (<640px) ─── Touch target confortable (≥48px), proportions
   phonographe resserrées, halo/aura resserrés pour ne pas déborder. ─── */
@media (max-width: 639px) {
    body.theme-royal-page .inv-bg-music {
        --r-disc-size: 66px;
        --r-phono-height: 78px;
    }
    body.theme-royal-page .inv-bg-music__btn::before {
        top: -8px;
        height: 11px;
    }
    body.theme-royal-page .inv-bg-music__btn .inv-bg-music__aura {
        inset: -18px;
    }
    body.theme-royal-page .inv-bg-music__btn .inv-bg-music__ring {
        inset: -16px;
    }
}

/* ─── ACCESSIBILITÉ ─── prefers-reduced-motion neutralise toutes les
   animations du phonographe (sway, vinyle, ondes sonores, aura, halo,
   ring d'étoiles). Présence visuelle discrète mais immobile. */
@media (prefers-reduced-motion: reduce) {
    body.theme-royal-page .inv-bg-music__btn,
    body.theme-royal-page .inv-bg-music--visible .inv-bg-music__btn,
    body.theme-royal-page .inv-bg-music__btn::before,
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn::after,
    body.theme-royal-page .inv-bg-music__btn .inv-bg-music__aura,
    body.theme-royal-page .inv-bg-music__btn .inv-bg-music__ring::before,
    body.theme-royal-page .inv-bg-music__btn .inv-bg-music__ring::after,
    body.theme-royal-page .inv-bg-music__btn:active .inv-bg-music__ripple,
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__jewel,
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__progress,
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__shine {
        animation: none;
    }
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn::after,
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__aura,
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__ring,
    body.theme-royal-page .inv-bg-music--playing .inv-bg-music__btn .inv-bg-music__progress {
        opacity: 0.55;
    }
}

/* ─── ACCESSIBILITÉ : prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
    html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__btn,
    html:has(.invitation-wrapper[data-theme="royal"])
        .inv-bg-music__btn::before,
    html:has(.invitation-wrapper[data-theme="royal"])
        .inv-bg-music--visible
        .inv-bg-music__btn,
    html:has(.invitation-wrapper[data-theme="royal"])
        .inv-bg-music--playing
        .inv-bg-music__btn {
        animation: none;
    }
    html:has(.invitation-wrapper[data-theme="royal"])
        .inv-bg-music--playing
        .inv-bg-music__btn::before {
        opacity: 0.6;
    }
}

html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__panel {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.05'/></svg>"),
        linear-gradient(
            180deg,
            var(--ir-velvet-soft) 0%,
            var(--tch-primary) 100%
        );
    border: 1px solid var(--tch-accent);
    box-shadow:
        0 0 0 3px var(--ir-velvet-deep),
        0 0 0 4px color-mix(in srgb, var(--tch-accent) 50%, transparent),
        0 20px 60px rgba(0, 0, 0, 0.7);
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__title,
html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__artist {
    color: var(--tch-bg);
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__eyebrow {
    font-family: var(--inv2-font-title);
    color: var(--tch-accent);
    letter-spacing: 0.24em;
    padding-left: 0.24em;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__progress {
    stroke: var(--tch-accent);
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-bg-music__fill {
    background: linear-gradient(
        90deg,
        var(--tch-accent-soft) 0%,
        var(--tch-accent) 50%,
        var(--tch-accent-soft) 100%
    );
    background-size: 200% 100%;
    animation: ir-progress-shimmer 3s linear infinite;
}

/* — WhatsApp ── missive scellée (enveloppe avec cire) ─────────────────────── */
/* Ne pas redéclarer `position` : la base est en `fixed`, ce qui sert déjà
   de containing block aux pseudo-éléments ::before/::after. */
html:has(.invitation-wrapper[data-theme="royal"]) .inv-share-whatsapp {
    background: linear-gradient(135deg, #1f7a5c 0%, #155f47 100%);
    border: 2px solid var(--tch-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 3px var(--ir-velvet-deep),
        0 0 0 4px color-mix(in srgb, var(--tch-accent) 45%, transparent),
        0 8px 24px rgba(31, 122, 92, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.4s var(--ir-ease-spring),
        box-shadow 0.4s var(--ir-ease-out);
    overflow: visible;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-share-whatsapp:hover {
    transform: scale(1.08) rotate(-5deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 0 3px var(--ir-velvet-deep),
        0 0 0 4px var(--tch-accent),
        0 12px 32px rgba(31, 122, 92, 0.7),
        0 4px 12px rgba(0, 0, 0, 0.4);
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-share-whatsapp i {
    color: #fff;
    position: relative;
    z-index: 2;
}
/* Pli d'enveloppe + sceau de cire — exclusivement mobile (≤600px). En desktop,
   le bouton devient une pilule horizontale « Partager » : la V triangulaire
   et le sceau rouge au centre se superposeraient au texte/icone et casseraient
   l'affordance. La métaphore enveloppe scellée ne fonctionne visuellement que
   sur le format carré-cercle du mobile (cf. base : 50% border-radius <600px). */
@media (max-width: 600px) {
    /* Pli de l'enveloppe — V triangulaire sur le dessus */
    html:has(.invitation-wrapper[data-theme="royal"]) .inv-share-whatsapp::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background:
            linear-gradient(
                135deg,
                transparent 49%,
                color-mix(in srgb, var(--tch-accent) 50%, transparent) 50%,
                transparent 51%
            ),
            linear-gradient(
                45deg,
                transparent 49%,
                color-mix(in srgb, var(--tch-accent) 50%, transparent) 50%,
                transparent 51%
            );
        pointer-events: none;
    }
    /* Sceau de cire rouge au centre */
    html:has(.invitation-wrapper[data-theme="royal"]) .inv-share-whatsapp::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        transform: translate(-50%, -50%);
        background: radial-gradient(
            circle at 35% 35%,
            #7a1d2e 0%,
            var(--tch-secondary) 60%,
            #3a0810 100%
        );
        border-radius: 50%;
        box-shadow:
            inset 0 1px 2px rgba(255, 255, 255, 0.2),
            0 0 6px color-mix(in srgb, var(--tch-secondary) 50%, transparent);
        pointer-events: none;
        z-index: 1;
    }
}

/* — Scroll-nav ── boutons couronnés + espacement ergonomique mobile ──────── */
/* Sur mobile, la couronne SVG au-dessus de chaque bouton fait ~8px de hauteur,
   plus le bouton WhatsApp en bas (52px) → les widgets se touchent. On augmente
   l'espace au-dessus du WhatsApp pour respecter Loi de Fitts (zones cliquables
   distinctes, au moins 12px d'ecart). */
html:has(.invitation-wrapper[data-theme="royal"]) .inv-scroll-nav {
    /* +44px par rapport au default (calc(84px + safe-area)) pour eviter le
     chevauchement entre la couronne scroll-nav et le sceau WhatsApp royal */
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
}
@media (min-width: 768px) {
    html:has(.invitation-wrapper[data-theme="royal"]) .inv-scroll-nav {
        bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    }
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-scroll-nav__btn {
    position: relative;
    background: radial-gradient(
        circle at 30% 25%,
        var(--ir-velvet-soft) 0%,
        var(--ir-velvet-mid) 100%
    );
    border: 2px solid var(--tch-accent);
    color: var(--tch-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 2px var(--ir-velvet-deep),
        0 0 0 3px color-mix(in srgb, var(--tch-accent) 40%, transparent),
        0 4px 14px rgba(0, 0, 0, 0.4);
    transition:
        transform 0.3s var(--ir-ease-spring),
        box-shadow 0.3s var(--ir-ease-out);
    overflow: visible;
}
/* Couronne — petites pointes dorées sur le dessus */
html:has(.invitation-wrapper[data-theme="royal"]) .inv-scroll-nav__btn::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 20px;
    height: 8px;
    transform: translateX(-50%);
    background:
    /* 3 pointes en zigzag via clip-path */ linear-gradient(
        180deg,
        var(--tch-accent-soft) 0%,
        var(--tch-accent-hover) 100%
    );
    clip-path: polygon(
        0% 100%,
        10% 30%,
        25% 80%,
        50% 0%,
        75% 80%,
        90% 30%,
        100% 100%
    );
    pointer-events: none;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-scroll-nav__btn:hover {
    transform: scale(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 2px var(--ir-velvet-deep),
        0 0 0 3px var(--tch-accent),
        0 8px 24px color-mix(in srgb, var(--tch-accent) 50%, transparent);
}

/* — Progress bar ── sertie de gemmes (5 points dorés sur la jauge) ────────── */
html:has(.invitation-wrapper[data-theme="royal"]) .inv-progress {
    position: relative;
    background: linear-gradient(
        180deg,
        var(--ir-velvet-deep) 0%,
        var(--tch-primary) 100%
    );
    border: 1px solid color-mix(in srgb, var(--tch-accent) 50%, transparent);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 25%, transparent),
        0 4px 12px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: visible;
}
/* Jauge — fond sertissage sombre + liseré or pour rendre la portion non
   remplie visible sur le velours (sinon rgba(30,42,90,0.1) du base disparaît
   complètement sur le fond velours profond). */
html:has(.invitation-wrapper[data-theme="royal"]) .inv-progress__bar {
    background: color-mix(in srgb, #000 65%, var(--tch-primary));
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px color-mix(in srgb, var(--tch-accent) 30%, transparent);
    border-radius: 8px;
    position: relative;
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-progress__fill {
    position: relative;
    background: linear-gradient(
        90deg,
        var(--tch-accent) 0%,
        var(--tch-accent-soft) 50%,
        var(--tch-accent) 100%
    );
    background-size: 200% 100%;
    animation: ir-progress-shimmer 3s linear infinite;
    box-shadow: 0 0 10px color-mix(in srgb, var(--tch-accent) 60%, transparent);
    border-radius: 8px;
}
/* Gemmes en relief — attachées à __bar plutôt qu'au container .inv-progress.
   La jauge __bar est `flex: 1` : elle s'arrête naturellement au libellé
   « X% complété ». Le ::before est ainsi borné par construction, sans magic
   number. (L'ancienne tentative `left:24px; right:150px` sur .inv-progress
   continuait à traverser le texte sur certaines largeurs — cf. capture
   2026-05-25.) */
html:has(.invitation-wrapper[data-theme="royal"]) .inv-progress__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 10% 50%,
            var(--tch-accent-soft) 0%,
            var(--tch-accent-hover) 30%,
            transparent 31%
        ),
        radial-gradient(
            circle at 30% 50%,
            var(--tch-accent-soft) 0%,
            var(--tch-accent-hover) 30%,
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 50%,
            var(--tch-accent-soft) 0%,
            var(--tch-accent-hover) 30%,
            transparent 31%
        ),
        radial-gradient(
            circle at 70% 50%,
            var(--tch-accent-soft) 0%,
            var(--tch-accent-hover) 30%,
            transparent 31%
        ),
        radial-gradient(
            circle at 90% 50%,
            var(--tch-accent-soft) 0%,
            var(--tch-accent-hover) 30%,
            transparent 31%
        );
    background-size: 6px 6px;
    pointer-events: none;
    z-index: 2;
}
@keyframes ir-progress-shimmer {
    to {
        background-position: 200% 0;
    }
}
html:has(.invitation-wrapper[data-theme="royal"]) .inv-progress__text {
    font-family: var(--inv2-font-title);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--tch-accent-soft);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 8px color-mix(in srgb, var(--tch-accent) 40%, transparent);
    min-width: 110px;
}

/* — Cursor enrichi ── diamant pulsant + bague royale ───────────────────────── */
/* Important perf : on n'anime QUE transform/opacity (composé par le GPU).
   L'animation du `box-shadow` était la cause principale du curseur qui rame
   sur le thème royal (repaint plein écran à chaque frame). */
html:has(.invitation-wrapper[data-theme="royal"]) .cursor-ring__band {
    border-color: var(--tch-accent);
    background: radial-gradient(
        circle at 30% 30%,
        var(--tch-accent-soft) 0%,
        var(--tch-accent) 100%
    );
}
html:has(.invitation-wrapper[data-theme="royal"]) .cursor-ring__diamond {
    background: radial-gradient(
        circle at 35% 35%,
        var(--tch-accent-soft) 0%,
        var(--tch-accent) 50%,
        #8c6b22 100%
    );
    /* Ombre statique — l'effet de pulsation est obtenu via le halo ::after. */
    box-shadow: 0 0 12px color-mix(in srgb, var(--tch-accent) 70%, transparent);
}
/* Halo doré qui pulse — opacity + scale uniquement → GPU only */
html:has(.invitation-wrapper[data-theme="royal"]) .cursor-ring__diamond::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--tch-accent) 50%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
    animation: ir-cursor-halo 1.8s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes ir-cursor-halo {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.9;
    }
}
/* Pulsation accélérée sur hover de liens/CTA */
html:has(.invitation-wrapper[data-theme="royal"]).cursor-on-link
    .cursor-ring__diamond::after {
    animation-duration: 0.8s;
}

/* — Footer royal ── hérite du footer unifié, ajustements couleur ───────────── */
.invitation-wrapper .inv-footer__credit-name {
    text-shadow: 0 0 20px color-mix(in srgb, var(--tch-accent) 50%, transparent);
}
.invitation-wrapper .inv-footer__mark {
    text-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 70%, transparent);
}

/* ═════════════════════════════════════════════════════════════════════════════
   SPLASH ROYAL — « L'Ascension Royale » V2
   Narration cinématographique en 5 actes (≈ 6.5s), médaillon sacré final.
   Toutes les couleurs dérivent de var(--tch-*) pour s'adapter au thème par
   défaut et à la palette du mariage. Animations transform/opacity GPU-only.
   ───────────────────────────────────────────────────────────────────────────── */

/* SVG stop-color classes — même pattern que .ir-programme et le RSVP :
   - OR : couleurs HARDCODÉES (#fff1b8 / #d4af37 / #7a5b1a) — identité
     royale invariante quelle que soit la palette du mariage. Garantit qu'un
     mariage avec un --tch-accent jaune/clair ne casse pas le contraste.
   - VELOURS : dérive de --tch-primary (toujours sombre dans la majorité
     des palettes). Mix avec #000 pour garantir profondeur, et avec --tch-bg
     pour la touche claire. C'est ce qui rend la scène adaptable au mariage
     tout en préservant l'identité « velours profond + or massif ». */
.ir-splash__grad-stop-light { stop-color: #fff1b8; }
.ir-splash__grad-stop-mid   { stop-color: #d4af37; }
.ir-splash__grad-stop-dark  { stop-color: #7a5b1a; }
.ir-splash__grad-stop-velvet-light { stop-color: color-mix(in srgb, var(--tch-primary) 80%, var(--tch-bg)); }
.ir-splash__grad-stop-velvet-mid   { stop-color: color-mix(in srgb, var(--tch-primary) 75%, #000); }
.ir-splash__grad-stop-velvet-deep  { stop-color: color-mix(in srgb, var(--tch-primary) 50%, #000); }

/* Sceau royal en cire — gradient pourpre/bordeaux (dérivé de --tch-primary)
   pour cohérence avec la palette mariage, signature « cire à cacheter royale ». */
.ir-splash__grad-stop-wax-hi  { stop-color: color-mix(in srgb, var(--tch-primary) 50%, #e8c4d0); }
.ir-splash__grad-stop-wax-mid { stop-color: color-mix(in srgb, var(--tch-primary) 75%, #6a1a30); }
.ir-splash__grad-stop-wax-lo  { stop-color: color-mix(in srgb, var(--tch-primary) 85%, #2a0510); }

.ir-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* Grid 2 rangs : stage (1fr centré) + CTA (auto en bas). Évite le
       chevauchement médaillon/CTA observé en phase 3 sur viewport long. */
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    padding: clamp(20px, 4vh, 40px) 24px clamp(20px, 4vh, 40px);
    gap: clamp(14px, 2.5vh, 28px);
    overflow: hidden;
    /* Scène velours profonde : dérive de --tch-primary (toujours sombre) avec
       gros mix #000 pour garantir un fond riche et lisible quelle que soit
       la palette du mariage. Le halo or central reste hardcodé pour préserver
       l'identité royale même si --tch-accent est jaune/clair. */
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 50%,
            rgba(212, 175, 55, 0.10) 0%,
            transparent 65%
        ),
        radial-gradient(
            circle at 50% 50%,
            color-mix(in srgb, var(--tch-primary) 70%, #000) 0%,
            color-mix(in srgb, var(--tch-primary) 35%, #000) 100%
        );
    isolation: isolate;
    opacity: 0;
    animation: ir-splash-enter 0.8s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
@keyframes ir-splash-enter {
    to { opacity: 1; }
}

/* Calque velours : pattern fin diagonal en or hardcodé (≪ poussière dorée ≫) */
.ir-splash__velvet {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 2px,
        rgba(212, 175, 55, 0.04) 2px,
        rgba(212, 175, 55, 0.04) 3px
    );
    pointer-events: none;
    z-index: 1;
}

/* Halo radial central derrière la couronne — or hardcodé, signature royale */
.ir-splash__halo {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 38%,
        rgba(212, 175, 55, 0.16) 0%,
        transparent 38%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: ir-halo-fade 2s ease-out 1.4s forwards;
}
@keyframes ir-halo-fade { to { opacity: 1; } }

/* ─────────────────────────────────────────────────────────────────────────
   ACTE I — RIDEAUX DE VELOURS qui s'ouvrent (top + bottom)
   0.0s → 1.2s — Effet « lever du rideau » d'opéra royal.
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__curtain {
    position: absolute;
    left: -10%;
    right: -10%;
    height: 56%;
    z-index: 8;
    /* Rideau velours bordeaux hardcodé — identité royale invariante. Garantit
       un rideau profond et sombre quelle que soit la --tch-secondary du mariage
       (qui peut être dorée, claire, etc.) — la cérémonie reste cohérente. */
    background:
        repeating-linear-gradient(
            90deg,
            #5a0e1a 0px,
            #2a0810 12px,
            #5a0e1a 22px
        );
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
    will-change: transform;
}
.ir-splash__curtain--top {
    top: 0;
    transform: translateY(0);
    animation: ir-curtain-up 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
.ir-splash__curtain--bottom {
    bottom: 0;
    transform: translateY(0);
    animation: ir-curtain-down 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
@keyframes ir-curtain-up    { to { transform: translateY(-110%); } }
@keyframes ir-curtain-down  { to { transform: translateY(110%); } }

/* Frange dorée festonnée sur le bord intérieur du rideau */
.ir-splash__curtain-fringe {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 14px;
    background: radial-gradient(circle at 8px 0, #d4af37 0, #d4af37 4px, transparent 5px) repeat-x;
    background-size: 16px 14px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.ir-splash__curtain-fringe--bottom {
    bottom: auto;
    top: -10px;
    transform: scaleY(-1);
}

/* ─────────────────────────────────────────────────────────────────────────
   FOND — Ciel étoilé qui apparaît derrière les rideaux
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__starlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    animation: ir-starlight-fade 1.4s ease-out 0.7s forwards;
}
@keyframes ir-starlight-fade { to { opacity: 1; } }
.ir-splash__starlight span {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff1b8;
    box-shadow: 0 0 6px #fff1b8;
    animation: ir-starlight-twinkle 3.5s ease-in-out infinite;
}
/* Distribution pseudo-aléatoire des étoiles */
.ir-splash__starlight span:nth-child(1)  { left: 8%;  top: 12%; animation-delay: 0s; }
.ir-splash__starlight span:nth-child(2)  { left: 22%; top: 8%;  animation-delay: 0.4s; }
.ir-splash__starlight span:nth-child(3)  { left: 38%; top: 14%; animation-delay: 0.8s; }
.ir-splash__starlight span:nth-child(4)  { left: 56%; top: 6%;  animation-delay: 1.2s; }
.ir-splash__starlight span:nth-child(5)  { left: 72%; top: 16%; animation-delay: 1.6s; }
.ir-splash__starlight span:nth-child(6)  { left: 88%; top: 10%; animation-delay: 2.0s; }
.ir-splash__starlight span:nth-child(7)  { left: 5%;  top: 38%; animation-delay: 0.6s; }
.ir-splash__starlight span:nth-child(8)  { left: 18%; top: 92%; animation-delay: 1.0s; }
.ir-splash__starlight span:nth-child(9)  { left: 35%; top: 88%; animation-delay: 1.4s; }
.ir-splash__starlight span:nth-child(10) { left: 60%; top: 90%; animation-delay: 1.8s; }
.ir-splash__starlight span:nth-child(11) { left: 78%; top: 86%; animation-delay: 0.2s; }
.ir-splash__starlight span:nth-child(12) { left: 92%; top: 36%; animation-delay: 2.4s; }
.ir-splash__starlight span:nth-child(13) { left: 14%; top: 60%; animation-delay: 0.9s; }
.ir-splash__starlight span:nth-child(14) { left: 90%; top: 62%; animation-delay: 1.5s; }
.ir-splash__starlight span:nth-child(15) { left: 3%;  top: 78%; animation-delay: 2.2s; }
.ir-splash__starlight span:nth-child(16) { left: 95%; top: 78%; animation-delay: 0.5s; }
.ir-splash__starlight span:nth-child(17) { left: 46%; top: 96%; animation-delay: 1.1s; }
.ir-splash__starlight span:nth-child(18) { left: 64%; top: 4%;  animation-delay: 1.7s; }
@keyframes ir-starlight-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.4); box-shadow: 0 0 12px #fff1b8; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PARTICULES DORÉES qui montent (subtiles, 16 unités)
   Démarrage après l'ouverture des rideaux.
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    animation: ir-sparkles-show 0.8s ease-out 1.4s forwards;
}
@keyframes ir-sparkles-show { to { opacity: 1; } }
.ir-splash__sparkles span {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
    opacity: 0;
    animation: ir-sparkle-rise 8s ease-in-out infinite;
}
.ir-splash__sparkles span:nth-child(1)  { left: 6%;  animation-delay: 0s;   animation-duration: 7s; }
.ir-splash__sparkles span:nth-child(2)  { left: 14%; animation-delay: 1.2s; animation-duration: 9s; }
.ir-splash__sparkles span:nth-child(3)  { left: 22%; animation-delay: 0.4s; animation-duration: 8s; }
.ir-splash__sparkles span:nth-child(4)  { left: 30%; animation-delay: 2.0s; animation-duration: 10s; }
.ir-splash__sparkles span:nth-child(5)  { left: 38%; animation-delay: 0.8s; animation-duration: 7.5s; }
.ir-splash__sparkles span:nth-child(6)  { left: 46%; animation-delay: 2.4s; animation-duration: 9.5s; }
.ir-splash__sparkles span:nth-child(7)  { left: 54%; animation-delay: 1.6s; animation-duration: 8.5s; }
.ir-splash__sparkles span:nth-child(8)  { left: 62%; animation-delay: 0.2s; animation-duration: 10s; }
.ir-splash__sparkles span:nth-child(9)  { left: 70%; animation-delay: 2.8s; animation-duration: 7s; }
.ir-splash__sparkles span:nth-child(10) { left: 78%; animation-delay: 1.0s; animation-duration: 9s; }
.ir-splash__sparkles span:nth-child(11) { left: 86%; animation-delay: 0.6s; animation-duration: 8s; }
.ir-splash__sparkles span:nth-child(12) { left: 92%; animation-delay: 2.2s; animation-duration: 10s; }
.ir-splash__sparkles span:nth-child(13) { left: 10%; animation-delay: 3.0s; animation-duration: 8.5s; }
.ir-splash__sparkles span:nth-child(14) { left: 50%; animation-delay: 3.4s; animation-duration: 9s; }
.ir-splash__sparkles span:nth-child(15) { left: 74%; animation-delay: 3.8s; animation-duration: 7.5s; }
.ir-splash__sparkles span:nth-child(16) { left: 90%; animation-delay: 4.2s; animation-duration: 10s; }
@keyframes ir-sparkle-rise {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    15%  { opacity: 0.9; }
    50%  { opacity: 1; transform: translateY(-50vh) translateX(8px) scale(1); }
    100% { transform: translateY(-105vh) translateX(-6px) scale(0.4); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCÈNE CENTRALE — Conteneur des actes II-V
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__stage {
    position: relative;
    /* z-index 9 pour passer au-dessus des rideaux (z-index 8) en phase 1 —
       garantit que le sceau royal et l'eyebrow ne soient jamais masqués
       par les rideaux fermés. */
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 480px;
    width: 100%;
    text-align: center;
    /* Le grid 2 rangs du parent .ir-splash sépare désormais le stage du CTA :
       plus besoin de padding-bottom artificiel pour réserver une zone CTA. */
}

/* ─────────────────────────────────────────────────────────────────────────
   ACTE II — COURONNE ROYALE (1.2s → 3.0s)
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__crown-wrap {
    position: relative;
    width: clamp(140px, 38vw, 200px);
    height: clamp(140px, 38vw, 200px);
    margin-bottom: 8px;
    opacity: 0;
    animation: ir-crown-appear 0.6s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1.2s forwards;
}
@keyframes ir-crown-appear {
    from { opacity: 0; transform: translateY(-20px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ir-splash__crown {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6));
}
.ir-splash__crown-band,
.ir-splash__crown-points {
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}
.ir-splash__crown-band {
    animation: ir-crown-draw 0.9s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1.4s forwards;
}
.ir-splash__crown-points {
    animation: ir-crown-draw 1.2s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1.8s forwards;
}
@keyframes ir-crown-draw { to { stroke-dashoffset: 0; } }

/* Joyaux et étoile — cascade après le tracé */
.ir-splash__jewel,
.ir-splash__crown-star {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: ir-jewel-drop 0.55s var(--ir-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}
.ir-splash__jewel--1     { animation-delay: 2.5s; }
.ir-splash__jewel--2     { animation-delay: 2.65s; }
.ir-splash__jewel--3     { animation-delay: 2.8s; }
.ir-splash__crown-star   { animation-delay: 2.95s; }
@keyframes ir-jewel-drop {
    0%   { opacity: 0; transform: translateY(-12px) scale(0); }
    65%  { opacity: 1; transform: translateY(0) scale(1.45); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Aura pulsante autour de l'étoile centrale (loop infini après acte II) */
.ir-splash__crown-star-aura {
    transform-origin: 100px 55px;
    animation: ir-star-aura 2.4s ease-in-out infinite 3.2s;
}
@keyframes ir-star-aura {
    0%, 100% { opacity: 0;   transform: scale(0.6); }
    50%      { opacity: 0.6; transform: scale(1.6); }
}

/* ─────────────────────────────────────────────────────────────────────────
   ACTE III — MONOGRAMME + NOMS + DATE (3.0s → 4.5s)
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__monogram {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: "Cormorant Garamond", "Bodoni Moda", serif;
    font-style: italic;
    color: #d4af37;
    margin: 4px 0 12px;
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
}
/* Version avec photos : alignement centré, gap plus large, marge ajustée */
.ir-splash__monogram--photos {
    align-items: center;
    gap: 18px;
    margin: 4px 0 18px;
}

/* Portrait — médaillon circulaire avec cadre or et image couvrante */
.ir-splash__portrait {
    display: inline-block;
    width: clamp(72px, 18vw, 96px);
    height: clamp(72px, 18vw, 96px);
    opacity: 0;
    transform: translateY(14px) scale(0.85);
    animation: ir-portrait-appear 0.75s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.ir-splash__portrait--groom { animation-delay: 3.1s; }
.ir-splash__portrait--bride { animation-delay: 3.55s; }
@keyframes ir-portrait-appear {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cadre or autour de la photo — anneau gravé + perlage doré */
.ir-splash__portrait-frame {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #fff1b8 0%, #d4af37 55%, #7a5b1a 100%);
    padding: 3px;
    box-shadow:
        0 0 0 1px rgba(255, 241, 184, 0.4),
        0 0 18px rgba(212, 175, 55, 0.45),
        0 8px 22px rgba(0, 0, 0, 0.5);
}
.ir-splash__portrait-frame::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 241, 184, 0.55);
    pointer-events: none;
    z-index: 2;
}
.ir-splash__portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}
.ir-splash__initial {
    display: inline-block;
    font-size: clamp(3rem, 9vw, 4.2rem);
    font-weight: 500;
    opacity: 0;
    transform: translateY(14px);
    animation: ir-monogram-stroke 0.7s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.ir-splash__initial--groom { animation-delay: 3.1s; }
.ir-splash__initial--bride { animation-delay: 3.55s; }
.ir-splash__amp {
    font-size: clamp(2rem, 6vw, 2.8rem);
    color: #fff1b8;
    opacity: 0;
    transform: scale(0.5);
    animation: ir-amp-pop 0.5s var(--ir-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) 3.3s forwards;
}
@keyframes ir-monogram-stroke {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ir-amp-pop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-10deg); }
    60%  { opacity: 1; transform: scale(1.2) rotate(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Noms complets sous le monogramme */
.ir-splash__names {
    font-family: "Bodoni Moda", "Didot", serif;
    font-size: clamp(1rem, 3vw, 1.3rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--tch-bg) 95%, transparent);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    animation: ir-names-rise 0.8s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 3.8s forwards;
}
@keyframes ir-names-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ir-splash__name {
    font-style: italic;
}
.ir-splash__name-and {
    font-size: 0.78em;
    color: #d4af37;
    letter-spacing: 0.2em;
    text-transform: lowercase;
}

/* Date + countdown */
.ir-splash__date-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
    opacity: 0;
    animation: ir-date-rise 0.8s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 4.1s forwards;
}
@keyframes ir-date-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ir-splash__date-line {
    flex: 0 0 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
.ir-splash__date {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-bg) 90%, transparent);
    letter-spacing: 0.02em;
}
.ir-splash__countdown {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    color: #d4af37;
    font-size: 0.85rem;
}
.ir-splash__countdown-num {
    font-family: "Bodoni Moda", serif;
    font-style: normal;
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff1b8;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
.ir-splash__countdown-label {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: lowercase;
    opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────────
   ACTE IV — MÉDAILLON SACRÉ (4.5s → 6.5s)
   Un disque ornementé descend du ciel, s'écrase au sol avec deux ondes
   concentriques. Toute la palette dérive de var(--tch-*) — l'or, le velours
   et la lumière suivent automatiquement le thème ou les couleurs du mariage.
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__medallion {
    position: relative;
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(130px, 34vw, 170px);
    height: clamp(130px, 34vw, 170px);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-240px) scale(0.55);
    filter: drop-shadow(0 20px 42px rgba(0, 0, 0, 0.7));
    animation:
        ir-medallion-drop 0.95s cubic-bezier(0.4, 0, 0.2, 1.2) 4.8s forwards,
        ir-medallion-pulse 1.8s ease-in-out infinite 6.7s;
    transition: transform 0.25s var(--ir-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    -webkit-tap-highlight-color: transparent;
}
@keyframes ir-medallion-drop {
    0%   { opacity: 0; transform: translateY(-240px) scale(0.5) rotate(-22deg); }
    55%  { opacity: 1; transform: translateY(10px) scale(1.14) rotate(3deg); }
    75%  { transform: translateY(-6px) scale(0.96) rotate(-1.5deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes ir-medallion-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
.ir-splash__medallion:hover  { animation-play-state: paused; transform: scale(1.06); }
.ir-splash__medallion:active { transform: scale(0.94); }
.ir-splash__medallion:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: 8px;
    border-radius: 50%;
}

/* SVG du médaillon — disque complet, plus de split bugué */
.ir-splash__medallion-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Lustre — reflet de lumière qui balaye le médaillon en boucle.
   Implémenté en CSS pur (gradient linéaire animé) plutôt qu'en trait SVG :
   plus doux, plus crédible comme « reflet », et invisible quand pas en mouvement. */
.ir-splash__medallion-shine {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    -webkit-mask: radial-gradient(circle, #000 60%, transparent 70%);
            mask: radial-gradient(circle, #000 60%, transparent 70%);
}
.ir-splash__medallion-shine::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 241, 184, 0.18) 35%,
        rgba(255, 241, 184, 0.32) 50%,
        rgba(255, 241, 184, 0.18) 65%,
        transparent 100%
    );
    transform: rotate(18deg);
    animation: ir-medallion-shine 6s ease-in-out infinite 6.8s;
}
@keyframes ir-medallion-shine {
    0%, 100% { left: -150%; opacity: 0; }
    35%      { opacity: 1; }
    65%      { opacity: 1; }
    100%     { left: 150%; opacity: 0; }
}

/* Fleurs-de-lys ornementales — scintillent en cascade après l'impact */
.ir-splash__medallion-fleur path {
    transform-origin: center;
    animation: ir-medallion-fleur-shimmer 3.4s ease-in-out infinite 6.5s;
}
.ir-splash__medallion-fleur path:nth-child(1) { animation-delay: 6.5s; }
.ir-splash__medallion-fleur path:nth-child(2) { animation-delay: 6.7s; }
.ir-splash__medallion-fleur path:nth-child(3) { animation-delay: 6.9s; }
.ir-splash__medallion-fleur path:nth-child(4) { animation-delay: 7.1s; }
@keyframes ir-medallion-fleur-shimmer {
    0%, 100% { opacity: 0.7; filter: none; }
    50%      { opacity: 1;   filter: drop-shadow(0 0 4px #d4af37); }
}

/* Ondes concentriques d'impact (déclenchées à 5.65s, après le drop) */
.ir-splash__medallion-wave {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #d4af37;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.6);
}
.ir-splash__medallion-wave--1 { animation: ir-medallion-wave 1.2s ease-out 5.65s forwards; }
.ir-splash__medallion-wave--2 { animation: ir-medallion-wave 1.2s ease-out 5.85s forwards; }
@keyframes ir-medallion-wave {
    0%   { opacity: 0.85; transform: scale(0.7); }
    100% { opacity: 0;    transform: scale(2.8); }
}

/* Monogramme central gravé — italique calligraphique or sur velours */
.ir-splash__medallion-monogram {
    position: relative;
    z-index: 2;
    font-family: "Cormorant Garamond", "Bodoni Moda", serif;
    font-style: italic;
    font-size: clamp(2.2rem, 6.5vw, 3rem);
    font-weight: 500;
    color: #d4af37;
    text-shadow:
        0 1px 0 #1a0408,
        0 0 20px rgba(212, 175, 55, 0.55);
    letter-spacing: 0.04em;
    pointer-events: none;
}
.ir-splash__medallion-monogram small {
    font-size: 0.55em;
    margin: 0 0.08em;
    vertical-align: middle;
    color: #fff1b8;
}

/* Light burst — pseudo-élément derrière le médaillon, activé à la brisure */
.ir-splash__medallion::before {
    content: "";
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #fff1b8 0%,
        rgba(212, 175, 55, 0.65) 30%,
        transparent 70%
    );
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    z-index: -1;
    transition:
        opacity 0.5s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        transform 0.7s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ─────────────────────────────────────────────────────────────────────────
   ACTE V — HINT clignotant (6.5s+)
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__hint {
    position: relative;
    z-index: 5;
    margin: 22px 0 0;
    font-family: var(--inv2-font-body, "Inter", sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in srgb, #f5f0e5 60%, transparent);
    padding-left: 0.24em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    animation:
        ir-hint-pulse 0.8s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 6.5s forwards,
        ir-hint-breathe 2.4s ease-in-out infinite 7.4s;
}
@keyframes ir-hint-pulse {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 0.85; transform: translateY(0); }
}
@keyframes ir-hint-breathe {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}
.ir-splash__hint-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
    animation: ir-hint-dot 1.6s ease-in-out infinite;
}
@keyframes ir-hint-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.6); opacity: 0.5; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BRISURE — sur tap, le médaillon explose en gerbe de lumière dorée :
   light burst radial + médaillon qui éclate vers l'extérieur, couronne qui
   s'élève + brille, noms qui se dissolvent dans la poussière dorée.
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash.ir-splash--breaking {
    pointer-events: none;
}
.ir-splash--breaking .ir-splash__medallion {
    animation: ir-medallion-burst 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ir-medallion-burst {
    0%   { transform: scale(1) rotate(0); opacity: 1; }
    20%  { transform: scale(0.86) rotate(-3deg); opacity: 1; }
    100% { transform: scale(3.4) rotate(15deg); opacity: 0;
           filter: drop-shadow(0 0 60px #d4af37) blur(2px); }
}
/* Light burst — pseudo-élément derrière le médaillon explose en lumière */
.ir-splash--breaking .ir-splash__medallion::before {
    opacity: 1;
    transform: scale(3.5);
}
/* Médaillon monogramme — s'élève en se diluant dans la lumière */
.ir-splash--breaking .ir-splash__medallion-monogram {
    animation: ir-medallion-monogram-rise 0.7s ease-out forwards;
}
@keyframes ir-medallion-monogram-rise {
    0%   { transform: scale(1) translateY(0); opacity: 1; }
    100% { transform: scale(1.6) translateY(-22px); opacity: 0; }
}
/* Couronne s'élève et brille intensément (libération royale) */
.ir-splash--breaking .ir-splash__crown-wrap {
    transform: translateY(-18px) scale(1.12);
    filter: drop-shadow(0 0 28px #fff1b8);
    transition: all 0.6s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Monogramme + noms + date — se dissolvent en montant (poussière dorée) */
.ir-splash--breaking .ir-splash__monogram,
.ir-splash--breaking .ir-splash__names,
.ir-splash--breaking .ir-splash__date-block {
    animation: ir-text-dissolve 0.7s ease-out forwards;
}
.ir-splash--breaking .ir-splash__names      { animation-delay: 0.05s; }
.ir-splash--breaking .ir-splash__date-block { animation-delay: 0.1s; }
@keyframes ir-text-dissolve {
    0%   { opacity: 1; transform: translateY(0); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-16px); filter: blur(3px); }
}
.ir-splash--breaking .ir-splash__hint {
    opacity: 0;
    transition: opacity 0.3s;
}
.ir-splash--breaking {
    animation: ir-splash-fade 0.7s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.5s forwards;
}
@keyframes ir-splash-fade {
    to { opacity: 0; visibility: hidden; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   STATE MACHINE 2 PHASES — voile total des infos couple en phase 1 (idle)
   En phase 1, l'utilisateur ne voit que :
     - le fond velours + halo or + particules ambiantes
     - le sceau royal en cire pourpre au centre (avec étoile or)
     - l'eyebrow « Un décret royal vous est adressé »
     - le CTA « Briser le sceau royal »
   Au premier clic, .ir-splash--opening retire le display: none et toutes
   les animations existantes (couronne, médaillon, noms, date) démarrent
   avec leurs delays. Pattern miroir des splashs Sablier et Baobab.
   ─────────────────────────────────────────────────────────────────────────── */
.ir-splash--idle .ir-splash__crown-wrap,
.ir-splash--idle .ir-splash__monogram,
.ir-splash--idle .ir-splash__names,
.ir-splash--idle .ir-splash__date-block,
.ir-splash--idle .ir-splash__medallion {
    display: none !important;
}
/* En phase 1 (idle), les rideaux sont OUVERTS (hors écran) pour révéler
   le sceau royal en cire au centre. L'animation « lever du rideau » se
   joue à l'entrée en phase 2 (opening) — les rideaux apparaissent en
   position fermée et s'écartent immédiatement, accompagnant le crack
   du sceau. Sans cette règle, les rideaux fermés masquent toute la scène. */
.ir-splash--idle .ir-splash__curtain {
    animation: none !important;
}
.ir-splash--idle .ir-splash__curtain--top {
    transform: translateY(-110%) !important;
}
.ir-splash--idle .ir-splash__curtain--bottom {
    transform: translateY(110%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   EYEBROW phase 1 — « Un décret royal vous est adressé »
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__eyebrow {
    position: relative;
    z-index: 6;
    margin: 0 0 clamp(20px, 3vh, 32px) 0;
    font-family: var(--ir-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: clamp(0.85rem, 2.4vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff1b8 85%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-align: center;
    opacity: 0;
    animation: ir-eyebrow-rise 1s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.8s forwards;
}
.ir-splash__eyebrow-rune {
    font-size: 1.4em;
    color: #d4af37;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}
@keyframes ir-eyebrow-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 0.92; transform: translateY(0); }
}
/* Fade out à l'ouverture pour laisser place à la scène royale */
.ir-splash--opening .ir-splash__eyebrow,
.ir-splash--discover .ir-splash__eyebrow {
    animation: ir-eyebrow-fade-out 0.5s ease-out forwards;
}
@keyframes ir-eyebrow-fade-out {
    to { opacity: 0; transform: translateY(-8px); visibility: hidden; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCEAU ROYAL EN CIRE — 2 moitiés clip-pathées avec étoile or estampée.
   Phase 1 : apparition douce + pulse subtle. Phase 2 : crack + ondes.
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__wax-seal {
    position: relative;
    z-index: 6;
    width: clamp(180px, 42vw, 240px);
    height: clamp(180px, 42vw, 240px);
    margin: 0;
    pointer-events: none;
    filter:
        drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 18px color-mix(in srgb, var(--tch-primary) 60%, transparent));
    opacity: 0;
    animation: ir-wax-form 1.1s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1.4s forwards;
}
@keyframes ir-wax-form {
    0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
.ir-splash__wax-half {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Phase 2 : les 2 moitiés s'écartent puis tombent en s'évaporant */
.ir-splash--opening .ir-splash__wax-half--left {
    animation: ir-wax-crack-left 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}
.ir-splash--opening .ir-splash__wax-half--right {
    animation: ir-wax-crack-right 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}
@keyframes ir-wax-crack-left {
    0%   { transform: translateX(0) translateY(0) rotate(0); opacity: 1; }
    35%  { transform: translateX(-40px) translateY(-4px) rotate(-12deg); opacity: 1; }
    100% { transform: translateX(-200px) translateY(120px) rotate(-50deg); opacity: 0; }
}
@keyframes ir-wax-crack-right {
    0%   { transform: translateX(0) translateY(0) rotate(0); opacity: 1; }
    35%  { transform: translateX(40px) translateY(-4px) rotate(12deg); opacity: 1; }
    100% { transform: translateX(200px) translateY(120px) rotate(50deg); opacity: 0; }
}
/* Le sceau disparaît une fois cracké : libère la place pour la scène royale */
.ir-splash--discover .ir-splash__wax-seal,
.ir-splash--breaking .ir-splash__wax-seal {
    display: none;
}

/* Ondes concentriques d'impact (T+0.6s, T+0.9s après le clic) */
.ir-splash__wax-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    margin-left: -90px;
    margin-top: -90px;
    border-radius: 50%;
    border: 2px solid #d4af37;
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
    z-index: 5;
}
.ir-splash--opening .ir-splash__wax-wave--1 {
    animation: ir-wax-wave 1.6s ease-out 0.6s forwards;
}
.ir-splash--opening .ir-splash__wax-wave--2 {
    animation: ir-wax-wave 1.6s ease-out 0.9s forwards;
    border-color: #fff1b8;
}
@keyframes ir-wax-wave {
    0%   { opacity: 0.9; transform: scale(0.3); }
    100% { opacity: 0;   transform: scale(3.4); }
}

/* ─────────────────────────────────────────────────────────────────────────
   CTA POLYMORPHE — porte les 2 labels selon la phase (idle / discover).
   Phase 1 (idle)     : « Briser le sceau royal » — visible en bas
   Phase 2 (opening)  : masqué pendant les 5s d'animation chirurgicale
   Phase 3 (discover) : « Découvrir l'invitation » — réémerge
   ──────────────────────────────────────────────────────────────────────── */
.ir-splash__cta {
    /* Grid row 2 du splash — pas d'absolute, justify-items: center du
       parent gère le centrage horizontal. Évite le chevauchement avec
       le médaillon (dernier élément du stage en phase 3). */
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: linear-gradient(
        135deg,
        var(--tch-primary, #0a1a3f) 0%,
        color-mix(in srgb, var(--tch-primary, #0a1a3f) 75%, #000) 100%
    );
    color: #FFF;
    border: 1px solid color-mix(in srgb, var(--tch-primary, #0a1a3f) 60%, #000);
    border-radius: 999px;
    font-family: var(--ir-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px -4px color-mix(in srgb, var(--tch-primary, #0a1a3f) 60%, transparent),
        0 14px 32px -10px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(0);
    animation: ir-cta-rise 0.9s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 2.2s forwards;
    transition: transform 0.3s var(--ir-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow 0.3s ease,
                opacity 0.4s ease;
    -webkit-tap-highlight-color: transparent;
}
@keyframes ir-cta-rise {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.ir-splash__cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 14px -4px color-mix(in srgb, var(--tch-primary, #0a1a3f) 70%, transparent),
        0 20px 44px -10px rgba(0, 0, 0, 0.6);
}
.ir-splash__cta:focus-visible {
    outline: 2px solid #fff1b8;
    outline-offset: 3px;
}
.ir-splash__cta-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ir-splash__cta-content--discover { display: none; }
.ir-splash--discover .ir-splash__cta-content--open { display: none; }
.ir-splash--discover .ir-splash__cta-content--discover {
    display: inline-flex;
    animation: ir-cta-fade-in 0.5s ease-out forwards;
}
@keyframes ir-cta-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Phase 2 (opening) : CTA masqué pour laisser contempler la chorégraphie */
.ir-splash--opening:not(.ir-splash--discover) .ir-splash__cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    animation: none;
}
/* Phase 3 (discover) : CTA réémerge avec sa propre montée */
.ir-splash--discover .ir-splash__cta {
    animation: ir-cta-rise 0.9s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.ir-splash__cta-icon,
.ir-splash__cta-arrow {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--ir-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.ir-splash__cta-icon svg,
.ir-splash__cta-arrow svg {
    width: 100%;
    height: 100%;
}
.ir-splash__cta:hover .ir-splash__cta-icon {
    animation: ir-cta-star-spin 1.2s ease-in-out infinite;
}
@keyframes ir-cta-star-spin {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-15deg); }
    75%      { transform: rotate(15deg); }
}
.ir-splash--discover .ir-splash__cta:hover .ir-splash__cta-arrow {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE — Densification < 380px (iPhone SE etc.)
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
    .ir-splash__crown-wrap     { width: 130px; height: 130px; }
    .ir-splash__medallion      { width: 118px; height: 118px; }
    .ir-splash__initial        { font-size: 2.6rem; }
    .ir-splash__amp            { font-size: 1.8rem; }
    .ir-splash__names          { font-size: 0.9rem; gap: 6px; }
    .ir-splash__date           { font-size: 0.85rem; }
    .ir-splash__date-line      { flex-basis: 20px; }
    .ir-splash__medallion-monogram { font-size: 1.9rem; }
    .ir-splash__wax-seal       { width: 170px; height: 170px; }
    .ir-splash__eyebrow        { font-size: 0.74rem; letter-spacing: 0.18em; gap: 8px; }
    .ir-splash__cta            { padding: 13px 26px; font-size: 0.95rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ACCESSIBILITÉ — prefers-reduced-motion : on saute les animations,
   contenu visible immédiatement (couronne / noms / médaillon).
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ir-splash,
    .ir-splash__halo,
    .ir-splash__curtain--top,
    .ir-splash__curtain--bottom,
    .ir-splash__starlight,
    .ir-splash__sparkles,
    .ir-splash__crown-wrap,
    .ir-splash__crown-band,
    .ir-splash__crown-points,
    .ir-splash__jewel,
    .ir-splash__crown-star,
    .ir-splash__crown-star-aura,
    .ir-splash__initial,
    .ir-splash__portrait,
    .ir-splash__amp,
    .ir-splash__names,
    .ir-splash__date-block,
    .ir-splash__medallion,
    .ir-splash__medallion-shine::after,
    .ir-splash__medallion-fleur path,
    .ir-splash__wax-seal,
    .ir-splash__wax-half,
    .ir-splash__eyebrow,
    .ir-splash__cta {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ir-splash__cta { transform: none !important; }
    .ir-splash__curtain--top    { transform: translateY(-110%) !important; }
    .ir-splash__curtain--bottom { transform: translateY(110%)  !important; }
    .ir-splash__crown-band,
    .ir-splash__crown-points    { stroke-dashoffset: 0 !important; }
    /* En reduced-motion, phase opening : masquer le sceau (animation
       crack désactivée) pour libérer la scène royale. */
    .ir-splash--opening .ir-splash__wax-seal,
    .ir-splash--discover .ir-splash__wax-seal { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE-FIRST — Finitions globales (UX.md §5)
   ───────────────────────────────────────────────────────────────────────────── */

/* iPhone SE et plus petits (≤ 380px) — densification maximale */
@media (max-width: 380px) {
    .ir-decor-corner {
        width: 48px;
        height: 48px;
    }
    .ir-decor-corner--tl,
    .ir-decor-corner--tr {
        top: 8px;
    }
    .ir-decor-corner--tl,
    .ir-decor-corner--bl {
        left: 8px;
    }
    .ir-decor-corner--tr,
    .ir-decor-corner--br {
        right: 8px;
    }
    .ir-decor-corner--bl,
    .ir-decor-corner--br {
        bottom: 8px;
    }

    .ir-hero__cartouche {
        padding: 24px 20px 32px;
    }
    .ir-hero__crown {
        width: 180px;
    }
    .ir-hero__date {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .ir-hero__date-day,
    .ir-hero__date-year {
        font-size: 1.25rem;
    }
    .ir-hero__cta {
        padding: 14px 22px;
        font-size: 0.75rem;
        letter-spacing: 0.18em;
    }

    .ir-audience__grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .ir-audience__medallion-frame {
        width: 96px;
        height: 96px;
    }
    .ir-audience__medallion-initials {
        font-size: 1.6rem;
    }

    .ir-court__card {
        width: 116px;
    }
    .ir-court__card-frame {
        width: 84px;
        height: 84px;
    }

    .ir-programme__card {
        padding: 14px 16px;
    }
    .ir-programme__card-time {
        font-size: 0.95rem;
    }
    .ir-programme__card-name {
        font-size: 1.1rem;
    }
}

/* Tablette portrait (640–1024px) — équilibre densité/respiration */
@media (min-width: 640px) and (max-width: 1024px) {
    .ir-audience__grid {
        gap: 24px;
    }
    .ir-court__scroller {
        padding: 8px 32px 24px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — Focus visible élégant (WCAG 2.1)
   ───────────────────────────────────────────────────────────────────────────── */
.invitation-wrapper a:focus-visible,
.invitation-wrapper button:focus-visible {
    outline: 2px solid var(--tch-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Skip-link royal pour navigation clavier */
.invitation-wrapper .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 8px 16px;
    background: var(--tch-accent);
    color: var(--tch-primary);
    font-family: var(--inv2-font-title);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 10000;
}
.invitation-wrapper .skip-link:focus {
    left: 8px;
    top: 8px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   RÉDUCTION DE MOUVEMENT (WCAG 2.1)
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .invitation-wrapper *,
    .ir-splash * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* Le sceau reste fonctionnel mais sans animation continue */
    .ir-splash__crown-band,
    .ir-splash__crown-points {
        stroke-dashoffset: 0;
        animation: none;
    }
    .ir-splash__jewel,
    .ir-splash__crown-star,
    .ir-splash__initials,
    .ir-splash__hint {
        opacity: 1;
    }
    .ir-splash__sparkles span,
    .ir-splash__hint-pulse,
    .ir-decor-particles span,
    .ir-decor-lily {
        opacity: 0.5;
        animation: none;
    }
    .ir-hero__crown-points,
    .ir-hero__crown-band,
    .ir-hero__crown-jewel {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    .ir-hero__scroll-indicator {
        animation: none;
    }
    html:has(.invitation-wrapper[data-theme="royal"]) .inv-progress__fill {
        animation: none;
    }
    html:has(.invitation-wrapper[data-theme="royal"])
        .cursor-ring__diamond::after {
        animation: none;
        opacity: 0.7;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FALLBACKS LARGEUR EXTRÊME (Desktop 1920+) — densité visuelle préservée
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
    .ir-hero__cartouche {
        padding: 48px 56px 56px;
    }
    .ir-audience__grid {
        gap: 40px;
    }
    .ir-decor-corner {
        width: 120px;
        height: 120px;
    }
}

/* =============================================================================
   PORTAIL TEMPOREL ROYAL — Overlay « remontée dans le temps »
   Cree dynamiquement en JS par openWithPortal (cf. invitation.js).
   Pattern identique au .tchefon-loader admin : overlay full-screen, opacity-driven
   via .show, mobile-first, prefers-reduced-motion respecte.
   Z-index 10010 (au-dessus du StoryViewer .inv-stories a 10001).
   ============================================================================= */

.ir-time-portal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.5s ease-out,
        visibility 0s linear 0.5s;
}
.ir-time-portal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.5s ease-out,
        visibility 0s linear 0s;
}

.ir-time-portal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 50% 50% at 50% 50%,
            color-mix(in srgb, var(--tch-purple), transparent 60%) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 100% 100% at 50% 50%,
            color-mix(in srgb, var(--tch-primary), transparent 4%) 0%,
            var(--ir-velvet-deep) 80%
        );
}

.ir-time-portal__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem 1.5rem;
}

.ir-time-portal__rings {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 1.75rem;
}
.ir-time-portal__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    /* Or massif pour contraster avec le backdrop primary sombre.
       Si surcharge wedding-colors souhaitee, override --tch-accent au niveau body. */
    border: 2px solid var(--tch-accent);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 24px color-mix(in srgb, var(--tch-accent), transparent 50%),
        inset 0 0 12px color-mix(in srgb, var(--tch-accent), transparent 70%);
}
.ir-time-portal__ring:nth-child(1) {
    width: 50px;
    height: 50px;
}
.ir-time-portal__ring:nth-child(2) {
    width: 90px;
    height: 90px;
}
.ir-time-portal__ring:nth-child(3) {
    width: 130px;
    height: 130px;
}

.ir-time-portal.show .ir-time-portal__ring {
    animation: ir-portal-ring 2.4s var(--ir-ease-out) infinite;
}
.ir-time-portal.show .ir-time-portal__ring:nth-child(1) {
    animation-delay: 0s;
}
.ir-time-portal.show .ir-time-portal__ring:nth-child(2) {
    animation-delay: 0.35s;
}
.ir-time-portal.show .ir-time-portal__ring:nth-child(3) {
    animation-delay: 0.7s;
}

@keyframes ir-portal-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.ir-time-portal__caption {
    color: var(--tch-bg);
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1.15rem, 3.2vw, 1.5rem);
    letter-spacing: 0.04em;
    text-shadow: 0 0 16px color-mix(in srgb, var(--tch-accent), transparent 50%);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ir-time-portal.show .ir-time-portal__ring {
        animation: none;
    }
    .ir-time-portal__ring:nth-child(1) {
        opacity: 1;
    }
    .ir-time-portal__ring:nth-child(2) {
        opacity: 0.7;
    }
    .ir-time-portal__ring:nth-child(3) {
        opacity: 0.4;
    }
}


/* =============================================================================
   LE DECRET DU TEMPS — Section calendar royale (compact 3 colonnes)
   Pattern : 3 sceaux cadrans alignes horizontalement (meme sur mobile)
   Chaque chip = cadran SVG + icone messager + label sous le sceau.
   Layout vertical par sceau, gain de hauteur x3 par rapport a la version cards.
   Toutes les couleurs derivent de var(--tch-primary/secondary/accent/bg).
   ============================================================================= */
.invitation-wrapper .ir-calendar {
    position: relative;
    margin: clamp(48px, 8vh, 80px) auto 0;
    padding: 0 16px;
    max-width: 760px;
}

.invitation-wrapper .ir-calendar__parchment {
    position: relative;
    padding: clamp(48px, 6vw, 64px) clamp(20px, 4vw, 40px) clamp(32px, 5vw, 44px);
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--tch-primary) 75%, var(--ir-velvet-deep)) 0%,
        var(--ir-velvet-deep) 100%
    );
    border-radius: clamp(14px, 2.4vw, 24px);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 22%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--tch-accent) 12%, transparent),
        0 24px 56px color-mix(in srgb, #000, transparent 65%);
    overflow: hidden;
}

/* Couronne SVG au sommet */
.invitation-wrapper .ir-calendar__crown {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 8vw, 84px);
    height: auto;
    filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--tch-accent), transparent 55%));
    animation: ir-cal-crown-shine 6s var(--ir-ease-in-out, cubic-bezier(0.85, 0, 0.15, 1)) infinite;
}
.invitation-wrapper .ir-calendar__crown svg { width: 100%; height: auto; display: block; }
@keyframes ir-cal-crown-shine {
    0%, 100% { filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--tch-accent), transparent 55%)) brightness(1); }
    50%      { filter: drop-shadow(0 4px 20px color-mix(in srgb, var(--tch-accent), transparent 25%)) brightness(1.16); }
}

/* 4 cartouches d'angle */
.invitation-wrapper .ir-calendar__corner {
    position: absolute;
    width: 36px;
    height: 36px;
    pointer-events: none;
    opacity: 0.55;
}
.invitation-wrapper .ir-calendar__corner::before,
.invitation-wrapper .ir-calendar__corner::after {
    content: "";
    position: absolute;
    background: var(--tch-accent);
    box-shadow: 0 0 5px color-mix(in srgb, var(--tch-accent), transparent 60%);
}
.invitation-wrapper .ir-calendar__corner::before { width: 1.5px; height: 18px; }
.invitation-wrapper .ir-calendar__corner::after  { width: 18px; height: 1.5px; }
.invitation-wrapper .ir-calendar__corner--tl { top: 12px;    left: 12px;    }
.invitation-wrapper .ir-calendar__corner--tl::before { top: 0; left: 0; }
.invitation-wrapper .ir-calendar__corner--tl::after  { top: 0; left: 0; }
.invitation-wrapper .ir-calendar__corner--tr { top: 12px;    right: 12px;   }
.invitation-wrapper .ir-calendar__corner--tr::before { top: 0; right: 0; }
.invitation-wrapper .ir-calendar__corner--tr::after  { top: 0; right: 0; }
.invitation-wrapper .ir-calendar__corner--bl { bottom: 12px; left: 12px;    }
.invitation-wrapper .ir-calendar__corner--bl::before { bottom: 0; left: 0; }
.invitation-wrapper .ir-calendar__corner--bl::after  { bottom: 0; left: 0; }
.invitation-wrapper .ir-calendar__corner--br { bottom: 12px; right: 12px;   }
.invitation-wrapper .ir-calendar__corner--br::before { bottom: 0; right: 0; }
.invitation-wrapper .ir-calendar__corner--br::after  { bottom: 0; right: 0; }

/* Header — eyebrow + question Carnegie + sous-titre */
/* Header aligne sur le pattern .ir-programme__header :
   flex centre, 2 dashes dores + losange or au centre, titre Cormorant italic */
.invitation-wrapper .ir-calendar__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 16px;
    z-index: 1;
    position: relative;
}
.invitation-wrapper .ir-calendar__header-dash {
    position: relative;
    flex: 0 0 clamp(48px, 8vw, 80px);
    height: 12px;
    background: none;
}
.invitation-wrapper .ir-calendar__header-dash::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--tch-accent) 30%,
        var(--tch-accent) 70%,
        transparent 100%
    );
}
.invitation-wrapper .ir-calendar__header-dash::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--tch-accent);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent);
}
.invitation-wrapper .ir-calendar__title {
    font-family: var(--inv2-font-display);
    font-size: clamp(1.4rem, 3.6vw, 2rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tch-bg);
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 14px color-mix(in srgb, var(--tch-primary), transparent 30%);
}
.invitation-wrapper .ir-calendar__lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-bg), transparent 28%);
    margin: 0 auto clamp(28px, 4vw, 40px);
    max-width: 480px;
    text-align: center;
    line-height: 1.55;
    z-index: 1;
    position: relative;
}

/* Grid 3 colonnes — meme sur mobile (les chips restent compactes) */
.invitation-wrapper .ir-calendar__seals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 2vw, 20px);
    position: relative;
    z-index: 1;
}
.invitation-wrapper .ir-calendar__entry {
    opacity: 0;
    animation: ir-cal-entry-reveal 0.7s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.invitation-wrapper .ir-calendar__entry:nth-child(1) { animation-delay: 0.15s; }
.invitation-wrapper .ir-calendar__entry:nth-child(2) { animation-delay: 0.3s;  }
.invitation-wrapper .ir-calendar__entry:nth-child(3) { animation-delay: 0.45s; }
@keyframes ir-cal-entry-reveal {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Chip cliquable — sceau au-dessus + label en dessous */
.invitation-wrapper .ir-calendar__chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(14px, 2.4vw, 20px) clamp(8px, 1.6vw, 14px);
    background: color-mix(in srgb, var(--tch-primary) 40%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 25%, transparent);
    border-radius: 12px;
    text-decoration: none;
    color: var(--tch-bg);
    text-align: center;
    transition:
        background 0.3s ease-out,
        border-color 0.3s ease-out,
        transform 0.35s var(--ir-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        box-shadow 0.35s ease-out;
}

/* Cadran SVG du sceau */
.invitation-wrapper .ir-calendar__chip-seal {
    position: relative;
    width: clamp(48px, 8vw, 60px);
    height: clamp(48px, 8vw, 60px);
}
.invitation-wrapper .ir-calendar__chip-seal svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tch-accent) 45%, transparent));
    animation: ir-cal-chip-pulse 4s ease-in-out infinite;
}
.invitation-wrapper .ir-calendar__entry:nth-child(2) .ir-calendar__chip-seal svg { animation-delay: 1.2s; }
.invitation-wrapper .ir-calendar__entry:nth-child(3) .ir-calendar__chip-seal svg { animation-delay: 2.4s; }
@keyframes ir-cal-chip-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Fond bordeaux velours du cadran */
.invitation-wrapper .ir-calendar__chip-dial {
    fill: color-mix(in srgb, var(--tch-secondary) 40%, transparent);
}

/* Icone messager au centre du cadran */
.invitation-wrapper .ir-calendar__chip-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tch-accent);
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    pointer-events: none;
}

/* Label sous le sceau */
.invitation-wrapper .ir-calendar__chip-label {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.85rem, 1.9vw, 1.05rem);
    font-weight: 500;
    color: var(--tch-bg);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* HOVER — chip subtilement souleve + bordure or s'intensifie */
.invitation-wrapper .ir-calendar__chip:hover {
    background: color-mix(in srgb, var(--tch-primary) 55%, transparent);
    border-color: color-mix(in srgb, var(--tch-accent) 55%, transparent);
    transform: translateY(-3px);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--tch-accent), transparent 78%),
        0 4px 12px color-mix(in srgb, #000, transparent 60%);
}
.invitation-wrapper .ir-calendar__chip:hover .ir-calendar__chip-seal svg {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tch-accent) 70%, transparent));
}

/* FOCUS visible */
.invitation-wrapper .ir-calendar__chip:focus-visible {
    outline: 2px solid var(--tch-accent);
    outline-offset: 4px;
}

/* ACTIVE — feedback tactile */
.invitation-wrapper .ir-calendar__chip:active {
    transform: translateY(-1px) scale(0.98);
    transition: transform 0.12s ease-out;
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .invitation-wrapper .ir-calendar__crown,
    .invitation-wrapper .ir-calendar__entry,
    .invitation-wrapper .ir-calendar__chip-seal svg {
        animation: none;
    }
    .invitation-wrapper .ir-calendar__entry { opacity: 1; transform: none; }
    .invitation-wrapper .ir-calendar__chip:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROYAL — Messages émotionnels « Décrets murmurés »
   Cartouche royal bleu nuit + bordure or + Cormorant italique. Cohérence
   avec les indicateurs de chapitre (ir-stargate, ir-audience).
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-royal-page .emotional-toast__text {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 96%, #000) 0%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 92%, #000) 100%
    );
    color: #F4E6C1;
    font-family: "Cormorant Garamond", "Bodoni Moda", serif;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    padding: 16px 32px;
    border-radius: 4px 28px 4px 28px;
    border: 1px solid color-mix(in srgb, #C6A15B 55%, transparent);
    box-shadow:
        0 14px 38px -10px color-mix(in srgb, #000 45%, transparent),
        0 0 0 1px color-mix(in srgb, #C6A15B 25%, transparent),
        inset 0 1px 0 rgba(244, 230, 193, 0.12);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
body.theme-royal-page .emotional-badge {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, #000) 0%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, #000) 100%
    );
    border: 1px solid color-mix(in srgb, #C6A15B 50%, transparent);
    box-shadow:
        0 10px 32px -8px color-mix(in srgb, #000 40%, transparent),
        0 0 0 1px color-mix(in srgb, #C6A15B 20%, transparent);
}
body.theme-royal-page .emotional-badge__text {
    color: #F4E6C1;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    letter-spacing: 0.04em;
}
body.theme-royal-page .emotional-secret__text {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 96%, #000),
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 88%, #000)
    );
    color: #F4E6C1;
    font-family: "Bodoni Moda", "Didot", serif;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, #C6A15B 60%, transparent);
    box-shadow:
        0 24px 64px -12px color-mix(in srgb, #000 55%, transparent),
        0 0 0 1px color-mix(in srgb, #C6A15B 30%, transparent);
}
body.theme-royal-page .scroll-milestone-toast {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 95%, #000),
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, #000)
    );
    color: #F4E6C1;
    border: 1px solid color-mix(in srgb, #C6A15B 45%, transparent);
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
}

/* RESPONSIVE mobile fine (≤480px) — chip plus compact, label visible */
@media (max-width: 480px) {
    .invitation-wrapper .ir-calendar { padding: 0 10px; }
    .invitation-wrapper .ir-calendar__parchment { padding: 44px 12px 28px; }
    .invitation-wrapper .ir-calendar__seals { gap: 8px; }
    .invitation-wrapper .ir-calendar__chip { padding: 12px 6px; gap: 8px; border-radius: 10px; }
    .invitation-wrapper .ir-calendar__chip-label { font-size: 0.85rem; }
}