/* ═════════════════════════════════════════════════════════════════════════════
   THÈME BAOBAB — Direction artistique « Le cycle de la savane »
   ────────────────────────────────────────────────────────────────────────────
   Le baobab est la silhouette repère permanente. La journée du mariage suit
   l'arc solaire, les milestones du couple suivent les saisons. Champ lexical :
   soleil, ciel, horizon, oiseaux, vent, herbes hautes, lumière dorée filtrée.

   Préfixe CSS conventionnel : .ib-* (Invitation Baobab), miroir de .ir-* Royal.

   Toutes les surfaces décoratives utilisent color-mix(var(--tch-*)) pour
   suivre automatiquement la palette du mariage (héritage Phase C).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Variables thème — palette + typographie + easings ─────────────────── */
.invitation-wrapper {
    /* Palette héritée des wedding_colors via theme_config (BD).
       Valeurs natives en fallback si non-overridées. */
    --tch-primary: #1f7a5c; /* Émeraude profond — feuillage du baobab */
    --tch-primary-hover: color-mix(in srgb, var(--tch-primary) 85%, #000);
    --tch-secondary: #8fc9a9; /* Sauge claire — herbes hautes au vent */
    --tch-accent: #e8a87c; /* Terre cuite — lumière dorée de l'horizon */
    --tch-accent-hover: color-mix(in srgb, var(--tch-accent) 85%, #000);
    --tch-bg: #f4f0e6; /* Lin pâle — savane au midi */
    --tch-surface: #ffffff;
    --tch-text: #2a3a2f; /* Vert forêt — texte profond */
    --tch-text-muted: #5a6b5e;

    /* Couleurs dérivées pour le cycle solaire et l'horizon */
    --ib-sky-dawn: color-mix(in srgb, var(--tch-accent) 65%, #ffd8a8);
    --ib-sky-noon: color-mix(in srgb, var(--tch-bg) 80%, #ffffff);
    --ib-sky-dusk: color-mix(in srgb, var(--tch-accent) 75%, #d68460);
    --ib-savane-dust: color-mix(in srgb, var(--tch-accent) 60%, #c9a87a);
    --ib-baobab-trunk: color-mix(in srgb, var(--tch-primary) 70%, #1a1a0c);
    --ib-baobab-shadow: color-mix(in srgb, var(--tch-primary) 88%, #000);
    --ib-foliage-deep: color-mix(in srgb, var(--tch-primary) 78%, #000);
    --ib-gold-ray: var(--tch-accent);
    --ib-gold-ray-soft: color-mix(in srgb, var(--tch-accent) 55%, transparent);

    /* Typographie — Cormorant pour les titres (gravure d'écorce),
       Inter pour le corps. */
    --inv2-font-title: "Cormorant Garamond", "Playfair Display", serif;
    --inv2-font-display: "Cormorant Garamond", "Bodoni Moda", serif;
    --inv2-font-script: "Cormorant Garamond", cursive;
    --inv2-font-body: "Inter", "Source Sans Pro", sans-serif;

    /* Easings signature Baobab — souffle, envol, arc solaire */
    --ib-ease-savane: cubic-bezier(
        0.22,
        1,
        0.36,
        1
    ); /* souffle lent, expiration */
    --ib-ease-bird: cubic-bezier(0.34, 1.56, 0.64, 1); /* envol bondissant */
    --ib-ease-sun: cubic-bezier(0.45, 0, 0.55, 1); /* arc sinusoïdal lisse */
}

/* ── 2. Texture savane du wrapper ─────────────────────────────────────────── */
.invitation-wrapper {
    background:
        /* halo solaire en haut, soleil filtré */
        radial-gradient(
            ellipse 90% 50% at 50% 0%,
            color-mix(in srgb, var(--ib-gold-ray) 25%, transparent) 0%,
            transparent 70%
        ),
        /* nuance crépusculaire en bas, ombre du baobab */
        radial-gradient(
                ellipse 80% 40% at 50% 100%,
                color-mix(in srgb, var(--ib-savane-dust) 30%, transparent) 0%,
                transparent 60%
            ),
        /* gradient principal : ciel-clair en haut, sable doré en bas */
        linear-gradient(
                180deg,
                var(--ib-sky-noon) 0%,
                color-mix(in srgb, var(--tch-bg) 90%, var(--ib-savane-dust)) 65%,
                color-mix(in srgb, var(--ib-savane-dust) 40%, var(--tch-bg))
                    100%
            );
    color: var(--tch-text);
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DÉCOR PERMANENT — Reste visible pendant tout le scroll.
   Silhouette baobab + herbes hautes + pétales/feuilles flottantes + soleil.
   Tous en position fixed, z-index négatif pour rester derrière le contenu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 2.1 Soleil filtré en haut-droite, présence solaire permanente ────────── */
.ib-decor-sun {
    position: fixed;
    top: -5vw;
    right: -5vw;
    width: 30vw;
    height: 30vw;
    max-width: 360px;
    max-height: 360px;
    pointer-events: none;
    z-index: -3;
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--ib-gold-ray) 45%, transparent) 0%,
        color-mix(in srgb, var(--ib-gold-ray) 18%, transparent) 30%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(8px);
    animation: ib-sun-breathe 12s var(--ib-ease-sun) infinite;
    will-change: transform, opacity;
}
@keyframes ib-sun-breathe {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

/* ── 2.2 Silhouette du baobab — repère permanent ───────────────────────────
   Position fixed bottom-left, silhouette en color-mix(primary) translucide.
   Le baobab africain : tronc large trapu, branches étalées horizontalement,
   couronne plate (« arbre à l'envers »). SVG inline ci-dessous. ─── */
.ib-decor-baobab {
    position: fixed;
    bottom: -2vh;
    left: -5vw;
    width: 36vw;
    height: 48vh;
    max-width: 420px;
    max-height: 520px;
    min-width: 220px;
    min-height: 280px;
    pointer-events: none;
    z-index: -2;
    opacity: 0.85;
    color: var(--ib-baobab-trunk);
    filter: drop-shadow(
        0 -8px 24px color-mix(in srgb, var(--ib-foliage-deep) 35%, transparent)
    );
}
.ib-decor-baobab svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ib-decor-baobab__trunk {
    fill: currentColor;
}
.ib-decor-baobab__crown {
    fill: var(--ib-foliage-deep);
}
.ib-decor-baobab__branch {
    stroke: currentColor;
    stroke-linecap: round;
    fill: none;
}

/* ── 2.3 Herbes hautes au vent — en bas, sur toute la largeur ──────────────
   3 nappes superposées (proche, médian, lointain) qui ondulent au vent. ─── */
.ib-decor-grasses {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18vh;
    max-height: 200px;
    min-height: 90px;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}
.ib-decor-grasses__nappe {
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 100%;
    transform-origin: center bottom;
    will-change: transform;
}
.ib-decor-grasses__nappe svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ib-decor-grasses__nappe--far {
    opacity: 0.55;
    color: color-mix(in srgb, var(--tch-secondary) 65%, transparent);
    animation: ib-grass-sway 9s var(--ib-ease-savane) infinite;
}
.ib-decor-grasses__nappe--mid {
    opacity: 0.75;
    color: color-mix(in srgb, var(--tch-primary) 60%, transparent);
    animation: ib-grass-sway 7s var(--ib-ease-savane) -1.2s infinite;
}
.ib-decor-grasses__nappe--near {
    opacity: 0.95;
    color: var(--ib-foliage-deep);
    animation: ib-grass-sway 5s var(--ib-ease-savane) -2.5s infinite;
}
@keyframes ib-grass-sway {
    0%,
    100% {
        transform: skewX(-2deg) translateX(0);
    }
    50% {
        transform: skewX(2deg) translateX(8px);
    }
}

/* ── 2.4 Pétales / feuilles flottantes — chute en spirale lente ───────────
   12 spans qui descendent en boucle, chacun a sa trajectoire propre via
   nth-child positions et delays. Pas d'image — formes générées en CSS. ─── */
.ib-decor-petals {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.ib-decor-petals span {
    position: absolute;
    top: -8vh;
    width: 12px;
    height: 6px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ib-gold-ray) 80%, #ffffff) 0%,
        var(--ib-gold-ray) 60%,
        color-mix(in srgb, var(--ib-gold-ray) 75%, #5a3010) 100%
    );
    opacity: 0;
    animation: ib-petal-fall 18s linear infinite;
    will-change: transform, opacity;
    filter: drop-shadow(
        0 1px 2px color-mix(in srgb, var(--ib-baobab-shadow) 45%, transparent)
    );
}
.ib-decor-petals span:nth-child(1) {
    left: 6%;
    animation-delay: 0s;
    animation-duration: 17s;
}
.ib-decor-petals span:nth-child(2) {
    left: 14%;
    animation-delay: -3s;
    animation-duration: 21s;
}
.ib-decor-petals span:nth-child(3) {
    left: 22%;
    animation-delay: -7s;
    animation-duration: 19s;
}
.ib-decor-petals span:nth-child(4) {
    left: 33%;
    animation-delay: -2s;
    animation-duration: 23s;
}
.ib-decor-petals span:nth-child(5) {
    left: 41%;
    animation-delay: -10s;
    animation-duration: 18s;
}
.ib-decor-petals span:nth-child(6) {
    left: 52%;
    animation-delay: -5s;
    animation-duration: 22s;
}
.ib-decor-petals span:nth-child(7) {
    left: 61%;
    animation-delay: -12s;
    animation-duration: 17s;
}
.ib-decor-petals span:nth-child(8) {
    left: 69%;
    animation-delay: -8s;
    animation-duration: 20s;
}
.ib-decor-petals span:nth-child(9) {
    left: 78%;
    animation-delay: -14s;
    animation-duration: 19s;
}
.ib-decor-petals span:nth-child(10) {
    left: 85%;
    animation-delay: -4s;
    animation-duration: 23s;
}
.ib-decor-petals span:nth-child(11) {
    left: 91%;
    animation-delay: -11s;
    animation-duration: 18s;
}
.ib-decor-petals span:nth-child(12) {
    left: 95%;
    animation-delay: -16s;
    animation-duration: 21s;
}

@keyframes ib-petal-fall {
    0% {
        transform: translate3d(0, -8vh, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate3d(40px, 50vh, 0) rotate(180deg);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate3d(-20px, 110vh, 0) rotate(360deg);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITAIRES SVG VARIABILISÉS — Stops et strokes qui suivent la palette
   mariage. Les attributs SVG stop-color="#XXX" ignorent les CSS vars,
   on bascule via classes (pattern Royal).
   ═══════════════════════════════════════════════════════════════════════════ */

.ib-svg-fill-primary {
    fill: var(--tch-primary);
}
.ib-svg-fill-secondary {
    fill: var(--tch-secondary);
}
.ib-svg-fill-accent {
    fill: var(--tch-accent);
}
.ib-svg-stroke-primary {
    stroke: var(--tch-primary);
}
.ib-svg-stroke-accent {
    stroke: var(--tch-accent);
}

.ib-svg-stop-accent-light {
    stop-color: color-mix(in srgb, var(--ib-gold-ray) 60%, #ffffff);
}
.ib-svg-stop-accent {
    stop-color: var(--ib-gold-ray);
}
.ib-svg-stop-accent-dark {
    stop-color: color-mix(in srgb, var(--ib-gold-ray) 65%, #2a1810);
}
.ib-svg-stop-primary-light {
    stop-color: color-mix(in srgb, var(--tch-primary) 70%, #ffffff);
}
.ib-svg-stop-primary {
    stop-color: var(--tch-primary);
}
.ib-svg-stop-primary-dark {
    stop-color: color-mix(in srgb, var(--tch-primary) 60%, #000000);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion neutralise toutes les animations
   du décor permanent (soleil qui respire, herbes au vent, pétales qui
   tombent). Présence visuelle conservée mais immobile.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ib-decor-sun,
    .ib-decor-grasses__nappe--far,
    .ib-decor-grasses__nappe--mid,
    .ib-decor-grasses__nappe--near,
    .ib-decor-petals span {
        animation: none;
    }
    .ib-decor-petals span {
        opacity: 0.6;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BAOBAB — « L'éveil sous le baobab » (refonte radicale)
   Atmosphère vivante (ciel qui respire, soleil rising, étoiles, oiseaux,
   poussière dorée) + composition centrale dramatisée (portraits flanqués
   d'un emblème solaire rotatif + noms en typographie poster cascade +
   date calligraphique + countdown live + CTA bouton-soleil). Mobile-first.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Easing dédié + variables locales — formules recalibrées mobile-first :
   les portraits et les noms occupent désormais beaucoup plus de place
   à 375px pour donner une vraie présence « poster » sur petits écrans. */
.ib-hero {
    --ib-hero-portrait-size: clamp(130px, 32vw, 180px);
    --ib-hero-emblem-size: clamp(64px, 14vw, 96px);
    --ib-hero-stage-gap: clamp(14px, 4vw, 40px);
    --ib-hero-name-size: clamp(3.4rem, 14vw, 5.6rem);
    --ib-hero-dust-color: color-mix(
        in srgb,
        var(--tch-accent, #c6a15b) 70%,
        #ffe9b5 30%
    );
    --ib-hero-emblem-color: var(--tch-accent, #c6a15b);
    --ib-hero-sky-top: color-mix(
        in srgb,
        var(--tch-primary, #1f7a5c) 35%,
        #0c1d2f 65%
    );
    --ib-hero-sky-mid: color-mix(
        in srgb,
        var(--tch-accent, #c6a15b) 45%,
        #e8a87c 55%
    );
    --ib-hero-sky-bottom: color-mix(
        in srgb,
        var(--tch-bg, #fff7ea) 80%,
        var(--tch-accent, #c6a15b) 20%
    );

    position: relative;
    min-height: 100vh;
    padding: 12vh 5vw 14vh;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── ATMOSPHÈRE : couches empilées ───────────────────────────────────── */
.ib-hero__atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Ciel : dégradé qui respire (cycle 12s très subtil) */
.ib-hero__sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        var(--ib-hero-sky-top) 0%,
        color-mix(
                in srgb,
                var(--ib-hero-sky-top) 70%,
                var(--ib-hero-sky-mid) 30%
            )
            35%,
        color-mix(
                in srgb,
                var(--ib-hero-sky-mid) 70%,
                var(--ib-hero-sky-bottom) 30%
            )
            65%,
        var(--ib-hero-sky-bottom) 100%
    );
    animation: ib-hero-sky-breathe 14s ease-in-out infinite;
}

@keyframes ib-hero-sky-breathe {
    0%,
    100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.08) saturate(1.12);
    }
}

/* Étoiles : 18 points qui scintillent puis fade-out T+0-2.8s */
.ib-hero__stars {
    position: absolute;
    inset: 0 0 50% 0;
    opacity: 1;
    animation: ib-hero-stars-fade 3.2s ease-out 0.5s forwards;
}

@keyframes ib-hero-stars-fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.ib-hero__star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    animation: ib-hero-star-twinkle 1.6s ease-in-out infinite;
}

@keyframes ib-hero-star-twinkle {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.6);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* Positionnement aléatoire pseudo-random des étoiles */
.ib-hero__star--1 {
    top: 8%;
    left: 12%;
    animation-delay: 0s;
}
.ib-hero__star--2 {
    top: 14%;
    left: 78%;
    animation-delay: 0.3s;
}
.ib-hero__star--3 {
    top: 22%;
    left: 34%;
    animation-delay: 0.6s;
    width: 3px;
    height: 3px;
}
.ib-hero__star--4 {
    top: 6%;
    left: 56%;
    animation-delay: 0.9s;
}
.ib-hero__star--5 {
    top: 18%;
    left: 88%;
    animation-delay: 1.2s;
}
.ib-hero__star--6 {
    top: 28%;
    left: 18%;
    animation-delay: 1.5s;
}
.ib-hero__star--7 {
    top: 12%;
    left: 42%;
    animation-delay: 0.4s;
    width: 3px;
    height: 3px;
}
.ib-hero__star--8 {
    top: 32%;
    left: 64%;
    animation-delay: 0.7s;
}
.ib-hero__star--9 {
    top: 4%;
    left: 28%;
    animation-delay: 1s;
}
.ib-hero__star--10 {
    top: 36%;
    left: 92%;
    animation-delay: 0.2s;
}
.ib-hero__star--11 {
    top: 26%;
    left: 8%;
    animation-delay: 1.4s;
}
.ib-hero__star--12 {
    top: 16%;
    left: 70%;
    animation-delay: 0.5s;
    width: 3px;
    height: 3px;
}
.ib-hero__star--13 {
    top: 8%;
    left: 84%;
    animation-delay: 1.1s;
}
.ib-hero__star--14 {
    top: 24%;
    left: 48%;
    animation-delay: 0.8s;
}
.ib-hero__star--15 {
    top: 38%;
    left: 22%;
    animation-delay: 1.3s;
}
.ib-hero__star--16 {
    top: 10%;
    left: 16%;
    animation-delay: 0.6s;
}
.ib-hero__star--17 {
    top: 30%;
    left: 52%;
    animation-delay: 1.6s;
}
.ib-hero__star--18 {
    top: 20%;
    left: 96%;
    animation-delay: 0.1s;
    width: 3px;
    height: 3px;
}

/* Halo lumineux qui annonce l'arrivée du soleil */
.ib-hero__horizon-glow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    height: 30%;
    background: radial-gradient(
        ellipse at center bottom,
        color-mix(in srgb, var(--tch-accent) 50%, transparent) 0%,
        color-mix(in srgb, var(--tch-accent) 25%, transparent) 30%,
        transparent 70%
    );
    filter: blur(16px);
    opacity: 0;
    animation: ib-hero-horizon-rise 3.5s var(--ib-ease-sun) 0.6s forwards;
}

@keyframes ib-hero-horizon-rise {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Soleil massif qui émerge derrière l'horizon — position basse pour ne pas
   masquer le contenu central. Final state à 60% de son propre Y → seule la
   partie supérieure dépasse, façon « soleil couchant derrière la terre ». */
.ib-hero__sun-disc {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: clamp(220px, 34vw, 380px);
    height: clamp(220px, 34vw, 380px);
    transform: translate(-50%, 80%);
    opacity: 0;
    animation: ib-hero-sun-rise 3.5s var(--ib-ease-sun) 1s forwards;
}

@keyframes ib-hero-sun-rise {
    0% {
        transform: translate(-50%, 80%);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 55%);
        opacity: 0.85;
    }
}

/* Voile clair qui s'estompe au-dessus du soleil pour garantir la lecture
   du contenu central même quand l'utilisateur active « Couleurs du mariage »
   avec une palette chaude. Le voile prend la couleur du fond (--tch-bg)
   donc s'adapte automatiquement. */
.ib-hero__atmosphere::after {
    content: "";
    position: absolute;
    inset: 30% 0 0 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 35%, transparent) 40%,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 55%, transparent) 75%,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 70%, transparent) 100%
    );
    pointer-events: none;
    opacity: 0;
    animation: ib-hero-veil-rise 2s var(--ib-ease-savane) 2.5s forwards;
}

@keyframes ib-hero-veil-rise {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.ib-hero__sun-core {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        color-mix(in srgb, var(--tch-accent) 95%, #fff 5%) 0%,
        color-mix(in srgb, var(--tch-accent) 75%, #ffe9b5 25%) 40%,
        color-mix(in srgb, var(--tch-accent) 55%, var(--tch-primary) 45%) 100%
    );
    box-shadow:
        0 0 40px color-mix(in srgb, var(--tch-accent) 75%, transparent),
        0 0 80px color-mix(in srgb, var(--tch-accent) 50%, transparent),
        inset 0 -8px 16px
            color-mix(in srgb, var(--tch-primary) 30%, transparent);
    animation: ib-hero-sun-pulse 4s ease-in-out infinite 4.5s;
}

@keyframes ib-hero-sun-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

.ib-hero__sun-rays-rotor {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 0deg 5deg,
        transparent 5deg 30deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 30deg 35deg,
        transparent 35deg 60deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 60deg 65deg,
        transparent 65deg 90deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 90deg 95deg,
        transparent 95deg 120deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 120deg 125deg,
        transparent 125deg 150deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 150deg 155deg,
        transparent 155deg 180deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 180deg 185deg,
        transparent 185deg 210deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 210deg 215deg,
        transparent 215deg 240deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 240deg 245deg,
        transparent 245deg 270deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 270deg 275deg,
        transparent 275deg 300deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 300deg 305deg,
        transparent 305deg 330deg,
        color-mix(in srgb, var(--tch-accent) 55%, transparent) 330deg 335deg,
        transparent 335deg 360deg
    );
    -webkit-mask: radial-gradient(
        circle,
        transparent 30%,
        #000 32%,
        #000 60%,
        transparent 65%
    );
    mask: radial-gradient(
        circle,
        transparent 30%,
        #000 32%,
        #000 60%,
        transparent 65%
    );
    opacity: 0.7;
    animation: ib-hero-sun-rotor 60s linear infinite 4.5s;
    filter: blur(2px);
}

@keyframes ib-hero-sun-rotor {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Vol d'oiseaux en V — traverse l'écran toutes les 14s */
.ib-hero__bird-flock {
    position: absolute;
    top: 18%;
    left: -25%;
    width: 28%;
    color: color-mix(in srgb, var(--tch-primary) 80%, #000 20%);
    animation: ib-hero-flock-fly 18s ease-in-out infinite 4s;
}

.ib-hero__bird-flock svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.ib-hero__bird {
    transform-origin: center;
    animation: ib-hero-bird-flap 0.6s ease-in-out infinite;
}

.ib-hero__bird--2 {
    animation-delay: 0.1s;
}
.ib-hero__bird--3 {
    animation-delay: 0.2s;
}
.ib-hero__bird--4 {
    animation-delay: 0.1s;
}
.ib-hero__bird--5 {
    animation-delay: 0.2s;
}

@keyframes ib-hero-bird-flap {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.55);
    }
}

@keyframes ib-hero-flock-fly {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    50% {
        transform: translateX(220%) translateY(-30px);
        opacity: 1;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateX(440%) translateY(-60px);
        opacity: 0;
    }
}

/* Poussière dorée — 24 particules qui dérivent en boucle */
.ib-hero__gold-dust {
    position: absolute;
    inset: 0;
}

.ib-hero__dust {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ib-hero-dust-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--tch-accent) 65%, transparent);
    opacity: 0;
    animation: ib-hero-dust-drift 16s linear infinite;
}

@keyframes ib-hero-dust-drift {
    0% {
        opacity: 0;
        transform: translate(0, 100vh) scale(0.6);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(80px, -10vh) scale(1.2);
    }
}

/* Positionnement et timings pseudo-aléatoires des particules */
.ib-hero__dust--1 {
    left: 6%;
    animation-delay: 0s;
    animation-duration: 14s;
}
.ib-hero__dust--2 {
    left: 14%;
    animation-delay: 1.2s;
    animation-duration: 17s;
}
.ib-hero__dust--3 {
    left: 22%;
    animation-delay: 0.4s;
    animation-duration: 19s;
}
.ib-hero__dust--4 {
    left: 30%;
    animation-delay: 2.5s;
    animation-duration: 15s;
}
.ib-hero__dust--5 {
    left: 38%;
    animation-delay: 1.8s;
    animation-duration: 18s;
}
.ib-hero__dust--6 {
    left: 46%;
    animation-delay: 0.7s;
    animation-duration: 16s;
}
.ib-hero__dust--7 {
    left: 54%;
    animation-delay: 3.2s;
    animation-duration: 14s;
}
.ib-hero__dust--8 {
    left: 62%;
    animation-delay: 2s;
    animation-duration: 17s;
}
.ib-hero__dust--9 {
    left: 70%;
    animation-delay: 0.9s;
    animation-duration: 19s;
}
.ib-hero__dust--10 {
    left: 78%;
    animation-delay: 4s;
    animation-duration: 15s;
}
.ib-hero__dust--11 {
    left: 86%;
    animation-delay: 1.5s;
    animation-duration: 16s;
}
.ib-hero__dust--12 {
    left: 94%;
    animation-delay: 2.8s;
    animation-duration: 18s;
}
.ib-hero__dust--13 {
    left: 10%;
    animation-delay: 5.2s;
    animation-duration: 17s;
    width: 2px;
    height: 2px;
}
.ib-hero__dust--14 {
    left: 18%;
    animation-delay: 3.5s;
    animation-duration: 15s;
    width: 2px;
    height: 2px;
}
.ib-hero__dust--15 {
    left: 26%;
    animation-delay: 6s;
    animation-duration: 19s;
    width: 4px;
    height: 4px;
}
.ib-hero__dust--16 {
    left: 34%;
    animation-delay: 4.5s;
    animation-duration: 14s;
    width: 2px;
    height: 2px;
}
.ib-hero__dust--17 {
    left: 42%;
    animation-delay: 7.2s;
    animation-duration: 17s;
}
.ib-hero__dust--18 {
    left: 50%;
    animation-delay: 5.8s;
    animation-duration: 16s;
    width: 4px;
    height: 4px;
}
.ib-hero__dust--19 {
    left: 58%;
    animation-delay: 8s;
    animation-duration: 15s;
    width: 2px;
    height: 2px;
}
.ib-hero__dust--20 {
    left: 66%;
    animation-delay: 6.5s;
    animation-duration: 18s;
}
.ib-hero__dust--21 {
    left: 74%;
    animation-delay: 9s;
    animation-duration: 14s;
    width: 4px;
    height: 4px;
}
.ib-hero__dust--22 {
    left: 82%;
    animation-delay: 7.5s;
    animation-duration: 19s;
    width: 2px;
    height: 2px;
}
.ib-hero__dust--23 {
    left: 90%;
    animation-delay: 10s;
    animation-duration: 16s;
}
.ib-hero__dust--24 {
    left: 98%;
    animation-delay: 8.5s;
    animation-duration: 17s;
    width: 2px;
    height: 2px;
}

/* ── CONTENU : composition centrale ───────────────────────────────────── */
.ib-hero__stage {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 880px;
    width: 100%;
    text-align: center;
}

.ib-hero__greeting {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: color-mix(in srgb, #fff 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 35%, transparent);
    border-radius: 999px;
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: clamp(0.92rem, 2.4vw, 1.05rem);
    color: var(--tch-primary);
    margin: 0;
    opacity: 0;
    animation: ib-hero-fade-up 0.8s var(--ib-ease-savane) 0.4s forwards;
    backdrop-filter: blur(8px);
}

.ib-hero__greeting strong {
    color: var(--tch-accent);
    font-weight: 600;
    font-style: normal;
}

.ib-hero__greeting-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tch-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tch-accent) 60%, transparent);
    animation: ib-hero-greeting-pulse 2s ease-out infinite;
}

@keyframes ib-hero-greeting-pulse {
    0% {
        box-shadow: 0 0 0 0
            color-mix(in srgb, var(--tch-accent) 60%, transparent);
    }
    100% {
        box-shadow: 0 0 0 14px transparent;
    }
}

/* Eyebrow gravé entre losanges */
.ib-hero__eyebrow-frame {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: ib-hero-fade-up 0.9s var(--ib-ease-savane) 0.6s forwards;
}

/* L'eyebrow est positionné dans la zone sombre du ciel (top du hero) :
   couleur claire OBLIGATOIRE pour rester lisible quelle que soit la
   palette du mariage. On dérive du fond ivoire (--tch-bg) qui est
   toujours clair, ou tombe sur un blanc 90% si la variable manque. */
.ib-hero__eyebrow-rule {
    width: clamp(28px, 6vw, 52px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tch-accent, #c6a15b) 85%, #fff 15%),
        color-mix(in srgb, var(--tch-accent, #c6a15b) 85%, #fff 15%),
        transparent
    );
    opacity: 0.95;
}

.ib-hero__eyebrow-mark {
    color: var(--tch-accent, #c6a15b);
    font-size: 0.7rem;
    text-shadow:
        0 0 12px color-mix(in srgb, var(--tch-accent, #c6a15b) 80%, transparent),
        0 0 4px rgba(0, 0, 0, 0.4);
}

.ib-hero__eyebrow-text {
    font-family: var(--inv2-font-title, "Cormorant Garamond", serif);
    font-size: clamp(0.78rem, 2.1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.42em;
    color: color-mix(in srgb, var(--tch-bg, #fff7ea) 95%, transparent);
    padding-left: 0.42em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* ── COUPLE STAGE : portraits + emblème solaire central ──────────────── */
.ib-hero__couple-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ib-hero-stage-gap);
    margin: 8px 0;
    position: relative;
}

.ib-hero__portrait {
    position: relative;
    width: var(--ib-hero-portrait-size);
    height: var(--ib-hero-portrait-size);
    flex: 0 0 auto;
    opacity: 0;
    animation: ib-hero-portrait-bloom 1.2s var(--ib-ease-bird) 1.4s forwards;
}

.ib-hero__portrait--bride {
    animation-delay: 1.6s;
}

@keyframes ib-hero-portrait-bloom {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Couronne de rayons SVG autour de chaque portrait */
.ib-hero__portrait-halo {
    position: absolute;
    inset: -18%;
    width: 136%;
    height: 136%;
    color: var(--tch-accent);
    filter: drop-shadow(
        0 0 8px color-mix(in srgb, var(--tch-accent) 50%, transparent)
    );
    pointer-events: none;
    z-index: 1;
}

.ib-hero__halo-rays {
    transform-origin: center;
    animation: ib-hero-halo-rotate 80s linear infinite;
}

.ib-hero__portrait--bride .ib-hero__halo-rays {
    animation-direction: reverse;
}

@keyframes ib-hero-halo-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ib-hero__portrait-link {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    z-index: 2;
    box-shadow:
        0 0 0 3px var(--tch-accent),
        0 0 0 6px color-mix(in srgb, #fff 95%, transparent),
        0 14px 32px color-mix(in srgb, var(--tch-primary) 35%, transparent);
}

.ib-hero__portrait-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ib-ease-savane);
}

.ib-hero__portrait-link:hover img {
    transform: scale(1.07);
}

/* Emblème solaire central — remplace le « & » */
.ib-hero__sun-emblem {
    width: var(--ib-hero-emblem-size);
    height: var(--ib-hero-emblem-size);
    color: var(--ib-hero-emblem-color);
    flex: 0 0 auto;
    filter: drop-shadow(
        0 0 14px color-mix(in srgb, var(--tch-accent) 55%, transparent)
    );
    opacity: 0;
    animation: ib-hero-emblem-rise 1.1s var(--ib-ease-bird) 1.8s forwards;
}

@keyframes ib-hero-emblem-rise {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.ib-hero__sun-emblem svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ib-hero__emblem-rotor {
    transform-origin: 60px 60px;
    animation: ib-hero-emblem-rotate 18s linear infinite 3s;
}

@keyframes ib-hero-emblem-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ib-hero__emblem-core {
    fill: radial-gradient(
        circle,
        var(--tch-accent),
        color-mix(in srgb, var(--tch-accent) 60%, var(--tch-primary))
    );
    fill: var(--tch-accent);
}

.ib-hero__emblem-amp {
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: 22px;
    fill: #fff;
    font-weight: 500;
}

/* ── NOMS DU COUPLE : typographie poster cascade ──────────────────────── */
.ib-hero__names {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 20px);
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    font-size: var(--ib-hero-name-size);
    font-weight: 500;
    line-height: 1;
    color: var(--tch-primary);
    margin: 36px 0 8px;
    letter-spacing: -0.01em;
    text-align: center;
}

.ib-hero__name {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    text-shadow:
        0 0 20px color-mix(in srgb, var(--tch-bg, #fff7ea) 75%, transparent),
        0 0 6px color-mix(in srgb, var(--tch-bg, #fff7ea) 90%, transparent),
        0 1px 0 rgba(255, 255, 255, 0.6),
        0 -1px 0 color-mix(in srgb, var(--tch-primary) 25%, transparent);
}

.ib-hero__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: ib-hero-letter-drop 0.8s var(--ib-ease-bird) forwards;
}

/* Cascade des lettres : chaque lettre apparaît avec un délai progressif.
   On utilise nth-child pour échelonner sans JS. Délai de base 2.2s + 60ms par lettre. */
.ib-hero__letter:nth-child(1) {
    animation-delay: 2.2s;
}
.ib-hero__letter:nth-child(2) {
    animation-delay: 2.26s;
}
.ib-hero__letter:nth-child(3) {
    animation-delay: 2.32s;
}
.ib-hero__letter:nth-child(4) {
    animation-delay: 2.38s;
}
.ib-hero__letter:nth-child(5) {
    animation-delay: 2.44s;
}
.ib-hero__letter:nth-child(6) {
    animation-delay: 2.5s;
}
.ib-hero__letter:nth-child(7) {
    animation-delay: 2.56s;
}
.ib-hero__letter:nth-child(8) {
    animation-delay: 2.62s;
}
.ib-hero__letter:nth-child(9) {
    animation-delay: 2.68s;
}
.ib-hero__letter:nth-child(10) {
    animation-delay: 2.74s;
}
.ib-hero__letter:nth-child(11) {
    animation-delay: 2.8s;
}
.ib-hero__letter:nth-child(12) {
    animation-delay: 2.86s;
}
.ib-hero__letter:nth-child(n + 13) {
    animation-delay: 2.92s;
}

@keyframes ib-hero-letter-drop {
    0% {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(8px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Esperluette du milieu : ligne d'or + & doré stylisé */
.ib-hero__names-join {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1.6vw, 14px);
    font-style: italic;
    color: var(--tch-accent);
    font-size: 0.7em;
    opacity: 0;
    animation: ib-hero-fade-up 0.7s var(--ib-ease-savane) 3s forwards;
}

.ib-hero__names-line {
    display: inline-block;
    width: clamp(20px, 4vw, 36px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tch-accent) 80%, transparent),
        transparent
    );
}

.ib-hero__names-amp {
    font-size: 1.3em;
    text-shadow:
        0 0 12px color-mix(in srgb, var(--tch-accent) 55%, transparent),
        0 2px 4px color-mix(in srgb, var(--tch-primary) 30%, transparent);
}

/* ── BLOC DATE : « Le 20 juin 2026 » calligraphique ──────────────────── */
.ib-hero__date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    opacity: 0;
    animation: ib-hero-fade-up 0.9s var(--ib-ease-savane) 3.2s forwards;
}

.ib-hero__date-prefix {
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.15rem);
    color: var(--tch-primary);
    opacity: 0.78;
    margin-bottom: -4px;
}

/* La date principale prend la couleur PROFONDE du thème (primary), pas l'or.
   Garantit la lisibilité quelle que soit la palette mariage active (le
   soleil derrière étant systématiquement doré, l'or-sur-or créait un
   conflit). Halo blanc/sombre via double text-shadow pour décoller la date
   du soleil même en palette chaude. */
.ib-hero__date-main {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(8px, 2vw, 16px);
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    color: var(--tch-primary);
    text-shadow:
        0 0 18px color-mix(in srgb, var(--tch-bg, #fff7ea) 85%, transparent),
        0 0 6px color-mix(in srgb, var(--tch-bg, #fff7ea) 95%, transparent),
        0 2px 4px color-mix(in srgb, var(--tch-primary) 25%, transparent);
}

.ib-hero__date-day {
    font-size: clamp(2.4rem, 7vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
}

.ib-hero__date-month {
    font-size: clamp(1.2rem, 3.2vw, 1.6rem);
    font-style: italic;
    text-transform: capitalize;
    letter-spacing: 0.04em;
}

.ib-hero__date-year {
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    letter-spacing: 0.18em;
    opacity: 0.85;
}

.ib-hero__date-rule {
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tch-accent) 70%, transparent),
        transparent
    );
    margin: 4px 0;
}

.ib-hero__location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: clamp(0.92rem, 2.4vw, 1.08rem);
    color: var(--tch-primary);
    margin: 0;
    text-shadow:
        0 0 14px color-mix(in srgb, var(--tch-bg, #fff7ea) 80%, transparent),
        0 0 4px color-mix(in srgb, var(--tch-bg, #fff7ea) 90%, transparent);
}

.ib-hero__location i {
    color: var(--tch-accent);
    font-size: 0.9em;
}

/* ── COUNTDOWN : pill sablier qui pulse ───────────────────────────────── */
.ib-hero__countdown {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    background: color-mix(in srgb, #fff 96%, var(--tch-accent) 4%);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 55%, transparent);
    border-radius: 999px;
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: clamp(0.88rem, 2.2vw, 1rem);
    color: var(--tch-primary);
    margin-top: 10px;
    opacity: 0;
    animation: ib-hero-fade-up 0.8s var(--ib-ease-savane) 3.5s forwards;
    box-shadow:
        0 8px 20px -6px color-mix(in srgb, var(--tch-primary) 25%, transparent),
        0 0 0 1px color-mix(in srgb, #fff 60%, transparent) inset;
    backdrop-filter: blur(8px);
}

.ib-hero__countdown-icon {
    width: 18px;
    height: 22px;
    color: var(--tch-accent);
    display: flex;
    align-items: center;
    animation: ib-hero-hourglass-tilt 4s ease-in-out infinite;
    transform-origin: center;
}

.ib-hero__countdown-icon svg {
    width: 100%;
    height: 100%;
}

@keyframes ib-hero-hourglass-tilt {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
}

.ib-hero__countdown-num {
    color: var(--tch-accent);
    font-weight: 700;
    font-style: normal;
    font-size: 1.15em;
    font-variant-numeric: tabular-nums;
}

.ib-hero__countdown--today {
    background: linear-gradient(
        135deg,
        var(--tch-accent),
        color-mix(in srgb, var(--tch-accent) 70%, var(--tch-primary) 30%)
    );
    color: #fff;
    border-color: var(--tch-accent);
}

.ib-hero__countdown--today .ib-hero__countdown-icon {
    color: #fff;
    animation: ib-hero-sun-pulse 1.5s ease-in-out infinite;
}

/* ── WELCOME MESSAGE ──────────────────────────────────────────────────── */
.ib-hero__welcome {
    font-family: var(--inv2-font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    line-height: 1.7;
    color: var(--tch-primary);
    max-width: 520px;
    margin: 12px auto 0;
    opacity: 0;
    animation: ib-hero-fade-up 0.9s var(--ib-ease-savane) 3.7s forwards;
    text-shadow:
        0 0 12px color-mix(in srgb, var(--tch-bg, #fff7ea) 80%, transparent),
        0 0 4px color-mix(in srgb, var(--tch-bg, #fff7ea) 90%, transparent);
}

/* ── CTA bouton-soleil ────────────────────────────────────────────────── */
.ib-hero__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 36px;
    color: #fff;
    font-family: var(--inv2-font-title, "Cormorant Garamond", serif);
    font-size: clamp(0.9rem, 2.4vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-radius: 999px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    margin-top: 14px;
    opacity: 0;
    animation: ib-hero-fade-up 0.9s var(--ib-ease-savane) 3.9s forwards;
    z-index: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px -4px color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, transparent),
        0 14px 32px -10px rgba(0, 0, 0, 0.55);
    transition:
        transform 0.4s var(--ib-ease-bird),
        box-shadow 0.4s var(--ib-ease-savane);
}

.ib-hero__cta-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        var(--tch-primary, #1E2A5A) 0%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 75%, #000) 100%
    );
    z-index: -1;
    transition: filter 0.4s ease;
}

/* Couronne de rayons SVG qui apparaît au hover */
.ib-hero__cta::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        var(--tch-accent) 0deg 4deg,
        transparent 4deg 30deg,
        var(--tch-accent) 30deg 34deg,
        transparent 34deg 60deg,
        var(--tch-accent) 60deg 64deg,
        transparent 64deg 90deg,
        var(--tch-accent) 90deg 94deg,
        transparent 94deg 120deg,
        var(--tch-accent) 120deg 124deg,
        transparent 124deg 150deg,
        var(--tch-accent) 150deg 154deg,
        transparent 154deg 180deg,
        var(--tch-accent) 180deg 184deg,
        transparent 184deg 210deg,
        var(--tch-accent) 210deg 214deg,
        transparent 214deg 240deg,
        var(--tch-accent) 240deg 244deg,
        transparent 244deg 270deg,
        var(--tch-accent) 270deg 274deg,
        transparent 274deg 300deg,
        var(--tch-accent) 300deg 304deg,
        transparent 304deg 330deg,
        var(--tch-accent) 330deg 334deg,
        transparent 334deg 360deg
    );
    -webkit-mask: radial-gradient(
        ellipse,
        transparent 60%,
        #000 65%,
        #000 100%
    );
    mask: radial-gradient(ellipse, transparent 60%, #000 65%, #000 100%);
    opacity: 0;
    transition:
        opacity 0.4s ease,
        transform 0.6s var(--ib-ease-savane);
    z-index: -2;
    animation: ib-hero-cta-rays 12s linear infinite paused;
}

@keyframes ib-hero-cta-rays {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ib-hero__cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 14px -4px color-mix(in srgb, var(--tch-primary, #1E2A5A) 70%, transparent),
        0 20px 44px -10px rgba(0, 0, 0, 0.6);
}

.ib-hero__cta:hover .ib-hero__cta-bg {
    filter: brightness(1.08);
}

.ib-hero__cta:hover::before {
    opacity: 1;
    animation-play-state: running;
}

.ib-hero__cta:active {
    transform: translateY(0) scale(0.98);
}

.ib-hero__cta:focus-visible {
    outline: 2px solid var(--tch-accent);
    outline-offset: 4px;
}

.ib-hero__cta-arrow {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    transition: transform 0.4s var(--ib-ease-bird);
}

.ib-hero__cta-arrow svg {
    width: 100%;
    height: 100%;
}

.ib-hero__cta:hover .ib-hero__cta-arrow {
    transform: translateX(6px);
}

/* ── SCROLL CUE : pétale doré qui descend ─────────────────────────────── */
.ib-hero__scroll-cue {
    position: absolute;
    bottom: 4vh;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--tch-primary);
    z-index: 5;
    opacity: 0;
    animation: ib-hero-fade-up 1s var(--ib-ease-savane) 4.2s forwards;
    text-shadow: 0 0 8px
        color-mix(in srgb, var(--tch-bg, #fff7ea) 75%, transparent);
}

.ib-hero__scroll-petal {
    width: 14px;
    height: 22px;
    color: var(--tch-accent);
    animation: ib-hero-scroll-fall 2.4s ease-in-out infinite;
}

.ib-hero__scroll-petal svg {
    width: 100%;
    height: 100%;
}

@keyframes ib-hero-scroll-fall {
    0% {
        transform: translateY(-6px) rotate(-12deg);
        opacity: 0.4;
    }
    50% {
        transform: translateY(2px) rotate(8deg);
        opacity: 1;
    }
    100% {
        transform: translateY(10px) rotate(-12deg);
        opacity: 0;
    }
}

.ib-hero__scroll-label {
    font-family: var(--inv2-font-title, "Cormorant Garamond", serif);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    /* Pas de padding-left : la spec CSS n'applique pas letter-spacing après
       le dernier caractère, donc aucune compensation n'est nécessaire. Une
       ancienne tentative de padding:0.32em décalait visuellement le texte
       vers la droite par rapport au pétale qui le surplombe. */
}

/* ── Animation fade-up générique réutilisée ──────────────────────────── */
@keyframes ib-hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── MOBILE ≤ 639px : présence poster, espaces resserrés ──────────────── */
@media (max-width: 639px) {
    .ib-hero {
        padding: 8vh 4vw 12vh;
        min-height: 100vh;
    }

    /* Stage : densifier la composition (gap 14 vs 20) */
    .ib-hero__stage {
        gap: 14px;
    }

    /* Greeting pill plus compact */
    .ib-hero__greeting {
        padding: 6px 14px;
        font-size: 0.92rem;
    }

    /* Eyebrow conserve sa noblesse mais s'aère un peu moins */
    .ib-hero__eyebrow-frame {
        gap: 8px;
    }
    .ib-hero__eyebrow-rule {
        width: 24px;
    }
    .ib-hero__eyebrow-text {
        letter-spacing: 0.32em;
        font-size: 0.78rem;
    }

    /* Stage du couple : portraits plus grands, emblème central proportionnel */
    .ib-hero__couple-stage {
        gap: 8px;
    }

    /* Noms : disposition « scénique » verticale qui occupe toute la largeur.
       Le « & » devient un séparateur compact entre les deux prénoms. */
    .ib-hero__names {
        flex-direction: column;
        gap: 4px;
        margin: 36px 0 8px;
        line-height: 0.95;
    }
    .ib-hero__names-join {
        margin: -2px 0;
        font-size: 0.55em;
    }
    .ib-hero__names-line {
        width: 28px;
    }

    /* Date « Le 20 juin 2026 » : on conserve la disposition horizontale
       pour garder l'impact d'une vraie date imprimée. Seul l'écran ultra-
       étroit (≤379px) basculera en colonne. */
    .ib-hero__date-block {
        gap: 6px;
        margin-top: 12px;
    }
    .ib-hero__date-prefix {
        font-size: 1rem;
    }
    .ib-hero__date-main {
        gap: 10px;
    }
    .ib-hero__date-day {
        font-size: 2.6rem;
    }
    .ib-hero__date-month {
        font-size: 1.2rem;
    }
    .ib-hero__date-year {
        font-size: 1rem;
    }

    /* Countdown : conserve la lisibilité mais resserre le padding */
    .ib-hero__countdown {
        padding: 8px 16px;
        font-size: 0.92rem;
    }

    /* CTA tactile : touch target ≥ 48px (UX.md §5) */
    .ib-hero__cta {
        padding: 14px 28px;
        font-size: 0.95rem;
        min-height: 48px;
    }

    /* Atmosphère : oiseaux plus visibles, soleil un poil plus haut pour
       qu'il apparaisse derrière les noms et non sous le countdown */
    .ib-hero__bird-flock {
        width: 42%;
    }
    .ib-hero__sun-disc {
        width: 78vw;
        height: 78vw;
        bottom: 6%;
    }
}

/* ── MOBILE ≤ 479px : disposition iPhone SE-friendly ─────────────────── */
@media (max-width: 479px) {
    .ib-hero {
        --ib-hero-portrait-size: clamp(118px, 33vw, 144px);
        --ib-hero-emblem-size: clamp(56px, 14vw, 72px);
        --ib-hero-name-size: clamp(3rem, 13vw, 4.4rem);
    }
    .ib-hero__couple-stage {
        gap: 6px;
    }
    .ib-hero__date-day {
        font-size: 2.3rem;
    }
}

/* ── MOBILE ≤ 379px : iPhone SE pure, date passe en colonne ─────────── */
@media (max-width: 379px) {
    .ib-hero {
        --ib-hero-portrait-size: 108px;
        --ib-hero-emblem-size: 52px;
        --ib-hero-name-size: 2.9rem;
    }
    .ib-hero__date-main {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }
    .ib-hero__eyebrow-rule {
        width: 18px;
    }
}

/* ── prefers-reduced-motion : neutralise toutes les animations ────────── */
@media (prefers-reduced-motion: reduce) {
    .ib-hero__sky,
    .ib-hero__stars,
    .ib-hero__star,
    .ib-hero__horizon-glow,
    .ib-hero__sun-disc,
    .ib-hero__sun-core,
    .ib-hero__sun-rays-rotor,
    .ib-hero__bird-flock,
    .ib-hero__bird,
    .ib-hero__dust,
    .ib-hero__greeting,
    .ib-hero__greeting-pulse,
    .ib-hero__eyebrow-frame,
    .ib-hero__portrait,
    .ib-hero__halo-rays,
    .ib-hero__sun-emblem,
    .ib-hero__emblem-rotor,
    .ib-hero__letter,
    .ib-hero__names-join,
    .ib-hero__date-block,
    .ib-hero__countdown,
    .ib-hero__countdown-icon,
    .ib-hero__welcome,
    .ib-hero__cta,
    .ib-hero__cta::before,
    .ib-hero__scroll-cue,
    .ib-hero__scroll-petal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ib-hero__stars {
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VERSE BAOBAB — « Le souffle du vent »
   Citation portée par le vent. Soleil filtré au centre + herbes hautes
   ondulantes sur les flancs. Le texte apparaît par typewriter (JS).
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-verse {
    position: relative;
    padding: 80px 6vw 80px;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
}

/* ── Herbes hautes ondulantes — gauche et droite ─────────────────────── */
.ib-verse__grass {
    position: absolute;
    bottom: 0;
    width: clamp(70px, 14vw, 130px);
    height: clamp(150px, 30vh, 240px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
    will-change: transform;
}
.ib-verse__grass svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ib-verse__grass--left {
    left: 0;
    transform-origin: left bottom;
    animation: ib-verse-grass-sway-left 6s var(--ib-ease-savane) infinite;
}
.ib-verse__grass--right {
    right: 0;
    transform-origin: right bottom;
    animation: ib-verse-grass-sway-right 7s var(--ib-ease-savane) -1.5s infinite;
}
@keyframes ib-verse-grass-sway-left {
    0%,
    100% {
        transform: rotate(-2deg) skewX(-1deg);
    }
    50% {
        transform: rotate(2deg) skewX(2deg);
    }
}
@keyframes ib-verse-grass-sway-right {
    0%,
    100% {
        transform: rotate(2deg) skewX(1deg);
    }
    50% {
        transform: rotate(-2deg) skewX(-2deg);
    }
}

/* ── Soleil filtré central + nuages stylisés en arrière ──────────────── */
.ib-verse__sun-veil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(260px, 50vw, 480px);
    height: clamp(260px, 50vw, 480px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--ib-gold-ray) 35%, transparent) 0%,
        color-mix(in srgb, var(--ib-gold-ray) 18%, transparent) 28%,
        color-mix(in srgb, var(--ib-gold-ray) 6%, transparent) 55%,
        transparent 80%
    );
    border-radius: 50%;
    filter: blur(12px);
    animation: ib-verse-sun-breathe 8s var(--ib-ease-sun) infinite;
}
@keyframes ib-verse-sun-breathe {
    0%,
    100% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
    }
}
.ib-verse__cloud {
    position: absolute;
    width: clamp(180px, 36vw, 320px);
    height: clamp(50px, 10vw, 90px);
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--tch-surface) 75%, transparent) 0%,
        color-mix(in srgb, var(--tch-surface) 35%, transparent) 60%,
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.7;
}
.ib-verse__cloud--top {
    top: 18%;
    left: 18%;
    animation: ib-verse-cloud-drift 22s linear infinite;
}
.ib-verse__cloud--bottom {
    bottom: 20%;
    right: 14%;
    animation: ib-verse-cloud-drift 28s linear -10s infinite reverse;
}
@keyframes ib-verse-cloud-drift {
    0% {
        transform: translateX(-15px);
    }
    100% {
        transform: translateX(15px);
    }
}

/* ── Contenu central ─────────────────────────────────────────────────── */
.ib-verse__content {
    position: relative;
    z-index: 3;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.ib-verse__eyebrow {
    font-family: var(--inv2-font-title);
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.42em;
    color: var(--tch-accent);
    padding-left: 0.42em;
}

.ib-verse__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%,
        color-mix(in srgb, var(--ib-gold-ray) 75%, #ffffff) 0%,
        var(--ib-gold-ray) 60%,
        color-mix(in srgb, var(--ib-gold-ray) 65%, var(--ib-baobab-shadow)) 100%
    );
    box-shadow:
        0 0 0 2px
            color-mix(in srgb, var(--ib-gold-ray) 60%, var(--ib-baobab-trunk)),
        0 0 24px color-mix(in srgb, var(--ib-gold-ray) 40%, transparent),
        0 8px 20px color-mix(in srgb, var(--ib-baobab-shadow) 35%, transparent);
}
.ib-verse__symbol-glyph {
    font-size: 2rem;
    line-height: 1;
    color: var(--ib-baobab-trunk);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ib-verse__text {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 3.4vw, 1.6rem);
    line-height: 1.8;
    color: var(--tch-text);
    margin: 0;
    padding: 0 12px;
    max-width: 560px;
    text-align: center;
    quotes: "« " " »";
}
.ib-verse__text::before {
    content: "« ";
    color: var(--ib-gold-ray);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.4em;
    margin-right: 4px;
}
.ib-verse__text::after {
    content: " »";
    color: var(--ib-gold-ray);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.4em;
    margin-left: 4px;
}
.ib-verse__cursor {
    display: inline-block;
    color: var(--ib-gold-ray);
    font-weight: 400;
    margin-left: 2px;
    animation: ib-verse-cursor-blink 0.9s steps(2, start) infinite;
}
.ib-verse__cursor--hidden {
    visibility: hidden;
}
@keyframes ib-verse-cursor-blink {
    50% {
        opacity: 0;
    }
}

.ib-verse__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 200px;
}
.ib-verse__rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--ib-gold-ray) 70%, transparent) 50%,
        transparent 100%
    );
}
.ib-verse__rule-dot {
    width: 6px;
    height: 6px;
    background: var(--ib-gold-ray);
    border-radius: 50%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--ib-gold-ray) 50%, transparent);
}

.ib-verse__source {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.85rem, 2.2vw, 1rem);
    color: color-mix(in srgb, var(--tch-text) 75%, transparent);
    letter-spacing: 0.04em;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ib-verse__grass,
    .ib-verse__sun-veil,
    .ib-verse__cloud,
    .ib-verse__cursor {
        animation: none;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .ib-verse {
        padding: 60px 5vw 60px;
    }
    .ib-verse__grass {
        opacity: 0.45;
        width: 60px;
    }
    .ib-verse__cloud--top,
    .ib-verse__cloud--bottom {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHOTO COUPLE BAOBAB — « Sous l'horizon partagé »
   Photo sertie dans un cadre savane : nuages qui dérivent + double trait
   doré aux coins + ombre commune elliptique projetée au sol.
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-couple {
    position: relative;
    padding: 80px 6vw 90px;
    overflow: hidden;
}

/* ── Bandeau ciel avec nuages qui dérivent en haut de section ────────── */
.ib-couple__sky {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30%;
    pointer-events: none;
    z-index: 0;
}
.ib-couple__cloud {
    position: absolute;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--tch-surface) 85%, transparent) 0%,
        color-mix(in srgb, var(--tch-surface) 40%, transparent) 60%,
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.75;
    will-change: transform;
}
.ib-couple__cloud--1 {
    top: 20%;
    left: 10%;
    width: clamp(120px, 28vw, 240px);
    height: clamp(40px, 9vw, 70px);
    animation: ib-couple-cloud-drift 26s linear infinite;
}
.ib-couple__cloud--2 {
    top: 8%;
    left: 42%;
    width: clamp(160px, 36vw, 320px);
    height: clamp(50px, 12vw, 90px);
    animation: ib-couple-cloud-drift 34s linear -8s infinite reverse;
}
.ib-couple__cloud--3 {
    top: 36%;
    right: 12%;
    width: clamp(100px, 24vw, 200px);
    height: clamp(35px, 8vw, 60px);
    animation: ib-couple-cloud-drift 30s linear -15s infinite;
}
@keyframes ib-couple-cloud-drift {
    0% {
        transform: translateX(-25px);
    }
    100% {
        transform: translateX(25px);
    }
}

.ib-couple__container {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.ib-couple__eyebrow {
    font-family: var(--inv2-font-title);
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.42em;
    color: var(--tch-accent);
    padding-left: 0.42em;
}

/* ── Cadre photo avec 4 ornements de coin dorés ───────────────────── */
.ib-couple__frame {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ib-gold-ray) 55%, transparent),
        0 0 0 8px color-mix(in srgb, var(--tch-bg) 90%, transparent),
        0 0 0 9px color-mix(in srgb, var(--ib-baobab-trunk) 60%, transparent),
        0 24px 50px color-mix(in srgb, var(--ib-baobab-shadow) 45%, transparent);
    transition: transform 0.5s var(--ib-ease-savane);
}
.ib-couple__frame:hover {
    transform: translateY(-4px) scale(1.01);
}
.ib-couple__corner {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 4;
    pointer-events: none;
    border: 2px solid var(--ib-gold-ray);
    filter: drop-shadow(
        0 0 4px color-mix(in srgb, var(--ib-gold-ray) 50%, transparent)
    );
}
.ib-couple__corner--tl {
    top: 12px;
    left: 12px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 4px;
}
.ib-couple__corner--tr {
    top: 12px;
    right: 12px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 4px;
}
.ib-couple__corner--bl {
    bottom: 12px;
    left: 12px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 4px;
}
.ib-couple__corner--br {
    bottom: 12px;
    right: 12px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 4px;
}
.ib-couple__photo-link {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
}
.ib-couple__photo-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ib-couple__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 24px 18px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--ib-baobab-shadow) 65%, transparent) 60%,
        color-mix(in srgb, var(--ib-baobab-shadow) 85%, transparent) 100%
    );
    color: #fff;
    text-align: center;
    z-index: 3;
}
.ib-couple__caption-names {
    display: block;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.ib-couple__caption-location {
    display: block;
    margin-top: 6px;
    font-family: var(--inv2-font-title);
    font-size: clamp(0.7rem, 1.8vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--ib-gold-ray);
    padding-left: 0.32em;
}

/* ── Ombre commune elliptique sous le cadre ──────────────────────────── */
.ib-couple__shadow {
    width: 70%;
    max-width: 460px;
    height: 24px;
    margin-top: -6px;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--ib-baobab-shadow) 55%, transparent) 0%,
        color-mix(in srgb, var(--ib-baobab-shadow) 25%, transparent) 50%,
        transparent 100%
    );
    border-radius: 50%;
    filter: blur(6px);
    opacity: 0.85;
}

.ib-couple__quote {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    color: var(--tch-text);
    margin: 0;
    max-width: 420px;
    text-align: center;
    line-height: 1.6;
}
.ib-couple__quote-mark {
    color: var(--ib-gold-ray);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.3em;
    margin: 0 4px;
}

/* ── prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ib-couple__cloud,
    .ib-couple__frame {
        animation: none;
        transition: none;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .ib-couple {
        padding: 60px 5vw 70px;
    }
    .ib-couple__cloud--2,
    .ib-couple__cloud--3 {
        opacity: 0.4;
    }
    .ib-couple__corner {
        width: 22px;
        height: 22px;
    }
    .ib-couple__caption {
        padding: 24px 16px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTRE HISTOIRE BAOBAB — « Le carnet de la savane »
   Album éditorial asymétrique : chaque milestone reçoit un layout
   COMPLÈTEMENT différent selon sa position (modulo 3) :
     — cinema    : photo/vidéo plein cadre 60vh + légende overlay
     — polaroid  : polaroïd incliné + cachet rond + note manuscrite
     — medaillon : photo clip-path organique + couronne feuilles + texte
   Ni grille, ni timeline — composition magazine éditorial.
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-story {
    position: relative;
    padding: 90px 6vw 100px;
    isolation: isolate;
    overflow: hidden;
}

/* ── Indicator chapitre ──────────────────────────────────────────────── */
.ib-story__indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ib-story__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);
}
.ib-story__indicator-label {
    font-family: var(--inv2-font-title);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.36em;
    color: color-mix(in srgb, var(--tch-text) 75%, transparent);
    padding-left: 0.36em;
}

/* ── En-tête éditoriale ──────────────────────────────────────────────── */
.ib-story__header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 56px;
}
.ib-story__eyebrow {
    display: inline-block;
    font-family: var(--inv2-font-title);
    font-size: clamp(0.72rem, 2vw, 0.88rem);
    text-transform: uppercase;
    letter-spacing: 0.42em;
    color: var(--tch-accent);
    padding: 4px 18px;
    border-top: 1px solid color-mix(in srgb, var(--tch-accent) 45%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--tch-accent) 45%, transparent);
    margin-bottom: 14px;
}
.ib-story__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2rem, 5.5vw, 3.2rem);
    line-height: 1.15;
    color: var(--ib-baobab-trunk);
    margin: 6px 0 14px;
}
.ib-story__lede {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 1.6;
    color: color-mix(in srgb, var(--tch-text) 80%, transparent);
    margin: 0;
}

/* ═══ ALBUM ═════════════════════════════════════════════════════════════ */
.ib-story__album {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 8vw, 96px);
    max-width: 1200px;
    margin: 0 auto 64px;
}

/* Bouton-page de base — chaque milestone est un élément actionnable */
.ib-story-page {
    position: relative;
    display: grid;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    text-align: left;
    transition: transform 0.5s var(--ib-ease-savane);
}
.ib-story-page:focus-visible {
    outline: 2px solid var(--tch-accent);
    outline-offset: 8px;
    border-radius: 8px;
}
.ib-story-page:hover {
    transform: translateY(-3px);
}

/* Titre et texte communs aux 3 layouts */
.ib-story-page__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    line-height: 1.15;
    color: var(--ib-baobab-trunk);
    margin: 0 0 14px;
    letter-spacing: -0.005em;
}
.ib-story-page__text {
    font-family: var(--inv2-font-body);
    font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    line-height: 1.7;
    color: color-mix(in srgb, var(--tch-text) 88%, transparent);
    margin: 0 0 22px;
    max-width: 480px;
}
.ib-story-page__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--inv2-font-title);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--tch-accent);
    padding-left: 0.32em;
    transition: gap 0.3s var(--ib-ease-bird);
}
.ib-story-page__cta svg {
    width: 14px;
    height: 14px;
}
.ib-story-page:hover .ib-story-page__cta {
    gap: 14px;
}

/* Fallback générique média (s'il n'y a ni vidéo ni image) — décor doré */
.ib-story-page__media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-accent) 14%, var(--tch-bg)) 0%,
        color-mix(in srgb, var(--tch-primary) 10%, var(--tch-bg)) 100%
    );
}
.ib-story-page__media-fallback svg {
    width: 45%;
    height: 45%;
}

/* ─── LAYOUT A : CINÉMA ──────────────────────────────────────────────── */
.ib-story-page--cinema {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
}
.ib-story-page__media--cinema {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(360px, 56vh, 580px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 18px 48px -16px color-mix(in srgb, var(--ib-baobab-shadow) 55%, transparent),
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 20%, transparent);
}
.ib-story-page__media--cinema video,
.ib-story-page__media--cinema img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ib-ease-savane);
}
.ib-story-page--cinema:hover .ib-story-page__media--cinema video,
.ib-story-page--cinema:hover .ib-story-page__media--cinema img {
    transform: scale(1.04);
}
/* Grain de film subtil par-dessus le média */
.ib-story-page__media-grain {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, #FFF 8%, transparent) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, #FFF 6%, transparent) 0%, transparent 25%),
        linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--ib-baobab-shadow) 50%, transparent) 100%);
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.7;
}

/* Légende cinéma : flotte au bas de la photo en glassmorphism */
.ib-story-page__legend {
    position: relative;
    margin: -110px clamp(24px, 5vw, 80px) 0;
    z-index: 2;
    padding: 28px 32px 26px;
    background: color-mix(in srgb, var(--tch-bg, #FFF7EA) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 30%, transparent);
    border-radius: 14px;
    box-shadow:
        0 14px 36px -12px color-mix(in srgb, var(--ib-baobab-shadow) 50%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Date au format jour énorme + mois/année petit, gravée */
.ib-story-page__day {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 12px;
    color: var(--tch-accent);
}
.ib-story-page__day-num {
    font-family: var(--inv2-font-display);
    font-size: clamp(3rem, 7vw, 4.4rem);
    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.02em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6),
        0 -1px 0 color-mix(in srgb, var(--ib-baobab-shadow) 28%, transparent);
}
.ib-story-page__day-sep {
    width: 1px;
    height: clamp(28px, 5vw, 40px);
    background: color-mix(in srgb, var(--tch-accent) 60%, transparent);
}
.ib-story-page__day-month {
    font-family: var(--inv2-font-title);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tch-primary) 80%, transparent);
    padding-left: 0.28em;
    white-space: nowrap;
}

/* ─── LAYOUT B : POLAROÏD ────────────────────────────────────────────── */
.ib-story-page--polaroid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(28px, 5vw, 64px);
    background:
        linear-gradient(
            115deg,
            color-mix(in srgb, var(--tch-bg, #FFF7EA) 92%, var(--tch-accent) 8%) 0%,
            color-mix(in srgb, var(--tch-bg, #FFF7EA) 88%, var(--ib-savane-dust) 12%) 100%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 8px,
            color-mix(in srgb, var(--ib-baobab-shadow) 2%, transparent) 8px,
            color-mix(in srgb, var(--ib-baobab-shadow) 2%, transparent) 9px
        );
    padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
    border-radius: 22px;
    box-shadow:
        0 16px 44px -16px color-mix(in srgb, var(--ib-baobab-shadow) 45%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--tch-accent) 22%, transparent);
}

.ib-story-page__polaroid {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-4deg);
    transition: transform 0.6s var(--ib-ease-bird);
}
.ib-story-page--polaroid:hover .ib-story-page__polaroid {
    transform: rotate(-2deg) translateY(-4px);
}
.ib-story-page__polaroid-frame {
    position: relative;
    display: block;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 4 / 5;
    padding: 16px 16px 56px;
    background: #FFFDF6;
    box-shadow:
        0 14px 36px -10px color-mix(in srgb, var(--ib-baobab-shadow) 55%, transparent),
        0 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.ib-story-page__polaroid-frame::before {
    content: "";
    position: absolute;
    inset: 16px 16px 56px;
    background: color-mix(in srgb, #2a2218 6%, transparent);
    z-index: 0;
}
.ib-story-page__polaroid-frame video,
.ib-story-page__polaroid-frame img {
    position: relative;
    width: 100%;
    height: calc(100% - 0px);
    object-fit: cover;
    display: block;
    z-index: 1;
    filter: contrast(1.04) saturate(0.92);
}
/* Petites bandes adhésives qui « collent » le polaroïd */
.ib-story-page__polaroid-tape {
    position: absolute;
    width: 60px;
    height: 18px;
    background: color-mix(in srgb, var(--tch-accent) 28%, #FFF 72%);
    opacity: 0.78;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.ib-story-page__polaroid-tape--tl {
    top: -6px;
    left: -10px;
    transform: rotate(-32deg);
}
.ib-story-page__polaroid-tape--br {
    bottom: 28px;
    right: -10px;
    transform: rotate(28deg);
}
.ib-story-page__polaroid-caption {
    margin-top: -38px;
    position: relative;
    z-index: 6;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--tch-primary) 70%, transparent);
    text-transform: capitalize;
    transform: rotate(-1deg);
}

.ib-story-page__note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.ib-story-page__stamp {
    display: inline-block;
    width: clamp(86px, 13vw, 108px);
    aspect-ratio: 1;
    color: var(--tch-accent);
    transform: rotate(-8deg);
    transition: transform 0.6s var(--ib-ease-bird);
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--ib-baobab-shadow) 30%, transparent));
}
.ib-story-page--polaroid:hover .ib-story-page__stamp {
    transform: rotate(-4deg) scale(1.05);
}
.ib-story-page__stamp svg {
    width: 100%;
    height: 100%;
}

/* ─── LAYOUT C : MÉDAILLON ───────────────────────────────────────────── */
.ib-story-page--medaillon {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.ib-story-page__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.ib-story-page__roman {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--inv2-font-title);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tch-primary) 80%, transparent);
    padding: 6px 18px;
    background: color-mix(in srgb, var(--tch-bg, #FFF7EA) 80%, var(--tch-accent) 4%);
    border-top: 1px solid color-mix(in srgb, var(--tch-accent) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--tch-accent) 55%, transparent);
}
.ib-story-page__roman-mark {
    color: var(--tch-accent);
    font-size: 0.85rem;
    line-height: 1;
}
.ib-story-page__roman-text {
    text-transform: capitalize;
    letter-spacing: 0.12em;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--tch-primary);
}

.ib-story-page__medaillon {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 420px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ib-story-page__medaillon-crown {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    color: var(--tch-accent);
    animation: ib-story-crown-rotate 60s linear infinite;
    transform-origin: center;
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ib-baobab-shadow) 28%, transparent));
}
@keyframes ib-story-crown-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ib-story-page--medaillon:hover .ib-story-page__medaillon-crown {
    animation-duration: 18s;
}
/* Photo en clip-path organique (forme de goutte/feuille) */
.ib-story-page__medaillon-photo {
    position: relative;
    width: 78%;
    aspect-ratio: 1;
    overflow: hidden;
    clip-path: path("M 200 12 C 320 12, 388 80, 388 200 C 388 320, 320 388, 200 388 C 80 388, 12 320, 12 200 C 12 80, 80 12, 200 12 Z");
    /* Plus organique : on use une clip-path inline qui simule une feuille */
    clip-path: ellipse(45% 50% at 50% 50%);
    box-shadow:
        0 14px 38px -10px color-mix(in srgb, var(--ib-baobab-shadow) 50%, transparent);
    background: color-mix(in srgb, var(--tch-accent) 8%, var(--tch-bg));
    transition: transform 0.7s var(--ib-ease-savane);
}
.ib-story-page--medaillon:hover .ib-story-page__medaillon-photo {
    transform: scale(1.03);
}
.ib-story-page__medaillon-photo video,
.ib-story-page__medaillon-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ═══ CTA STORY VIEWER GLOBAL ═══════════════════════════════════════════ */
.ib-story__cta-wrap {
    display: flex;
    justify-content: center;
}
.ib-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 36px;
    background: linear-gradient(
        135deg,
        var(--tch-primary) 0%,
        color-mix(in srgb, var(--tch-primary) 75%, var(--ib-foliage-deep)) 100%
    );
    color: #fff;
    font-family: var(--inv2-font-title);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--ib-gold-ray) 60%, var(--tch-primary));
    border-radius: 40px;
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--tch-primary) 60%, #000),
        0 14px 36px color-mix(in srgb, var(--ib-baobab-shadow) 40%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--ib-gold-ray) 35%, transparent);
    cursor: pointer;
    transition: transform 0.3s var(--ib-ease-bird);
}
.ib-story__cta:hover { transform: translateY(-3px); }
.ib-story__cta:active { transform: translateY(1px); }
.ib-story__cta i {
    color: var(--ib-gold-ray);
    font-size: 1em;
}
.ib-story__cta small {
    font-size: 0.7rem;
    opacity: 0.7;
    letter-spacing: 0.12em;
    text-transform: none;
    font-weight: 400;
    font-style: italic;
}

/* ── prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ib-story-page,
    .ib-story-page__media--cinema video,
    .ib-story-page__media--cinema img,
    .ib-story-page__polaroid,
    .ib-story-page__stamp,
    .ib-story-page__medaillon-crown,
    .ib-story-page__medaillon-photo {
        animation: none !important;
        transition: none !important;
    }
    .ib-story-page:hover {
        transform: none;
    }
}

/* ── TABLETTE & MOBILE ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ib-story {
        padding: 70px 5vw 80px;
    }
    .ib-story__album {
        gap: 56px;
    }

    /* Cinema mobile : légende sous la photo (plus en overlay) pour lisibilité */
    .ib-story-page__media--cinema {
        height: clamp(280px, 60vw, 380px);
        border-radius: 14px;
    }
    .ib-story-page__legend {
        margin: -50px 16px 0;
        padding: 22px 22px 20px;
    }
    .ib-story-page__day {
        gap: 10px;
    }

    /* Polaroïd mobile : polaroïd au-dessus, note en dessous, alignés au centre */
    .ib-story-page--polaroid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 28px 22px;
    }
    .ib-story-page__polaroid {
        margin: 0 auto;
        max-width: 280px;
    }
    .ib-story-page__note {
        align-items: center;
        text-align: center;
    }
    .ib-story-page__text {
        max-width: 100%;
    }

    /* Médaillon mobile : photo au-dessus, texte en dessous */
    .ib-story-page--medaillon {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .ib-story-page__column {
        order: 2;
        align-items: center;
        text-align: center;
    }
    .ib-story-page__medaillon {
        order: 1;
        max-width: 280px;
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMME BAOBAB — « Le cycle du jour »
   Arc solaire au-dessus + cards événement avec disque-heure dégradé selon
   le moment de la journée (aube/matinée/midi/après-midi/crépuscule/nuit).
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-prog {
    position: relative;
    padding: 90px 6vw 80px;
    isolation: isolate;
}

.ib-prog__indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ib-prog__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);
}
.ib-prog__indicator-label {
    font-family: var(--inv2-font-title);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.36em;
    color: color-mix(in srgb, var(--tch-text) 75%, transparent);
    padding-left: 0.36em;
}

.ib-prog__eyebrow {
    display: block;
    text-align: center;
    font-family: var(--inv2-font-title);
    font-size: clamp(0.72rem, 2vw, 0.88rem);
    text-transform: uppercase;
    letter-spacing: 0.42em;
    color: var(--tch-accent);
    padding-left: 0.42em;
    margin-top: 16px;
}

.ib-prog__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.25;
    color: var(--ib-baobab-trunk);
    text-align: center;
    margin: 12px auto 40px;
    max-width: 620px;
}

/* ── Arc solaire ─────────────────────────────────────────────────────── */
.ib-prog__arc {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 24px 32px;
    height: 180px;
    pointer-events: none;
}
.ib-prog__arc svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ib-prog__arc-markers circle {
    filter: drop-shadow(
        0 0 8px color-mix(in srgb, var(--ib-gold-ray) 65%, transparent)
    );
}

/* ── Timeline events en grid ─────────────────────────────────────────── */
.ib-prog__timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto 56px;
}

.ib-prog__event {
    position: relative;
    padding: 36px 24px 24px;
    background: color-mix(in srgb, var(--tch-surface) 92%, transparent);
    border-radius: 14px;
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--ib-gold-ray) 35%, transparent),
        0 14px 36px color-mix(in srgb, var(--ib-baobab-shadow) 20%, transparent);
    transition:
        transform 0.4s var(--ib-ease-savane),
        box-shadow 0.4s var(--ib-ease-savane);
}
.ib-prog__event:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--ib-gold-ray) 50%, transparent),
        0 20px 44px color-mix(in srgb, var(--ib-baobab-shadow) 30%, transparent);
}

/* Disque-heure en haut de la card, position du soleil selon moment du jour */
.ib-prog__event-sun {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 4px;
    background: var(--tch-surface);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ib-gold-ray) 40%, transparent),
        0 8px 16px color-mix(in srgb, var(--ib-baobab-shadow) 25%, transparent);
}
.ib-prog__event-sun-disc {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2);
}

/* Variantes du disque selon le moment du jour */
.ib-prog__event--dawn .ib-prog__event-sun-disc {
    background: radial-gradient(
        circle at 50% 70%,
        #ff9a6b 0%,
        #d68460 60%,
        #8a4632 100%
    );
}
.ib-prog__event--morning .ib-prog__event-sun-disc {
    background: radial-gradient(
        circle at 40% 40%,
        #ffd789 0%,
        var(--ib-gold-ray) 60%,
        color-mix(in srgb, var(--ib-gold-ray) 65%, var(--ib-baobab-shadow)) 100%
    );
}
.ib-prog__event--noon .ib-prog__event-sun-disc {
    background: radial-gradient(
        circle at 30% 30%,
        #fff5dc 0%,
        #ffe39a 50%,
        var(--ib-gold-ray) 100%
    );
}
.ib-prog__event--afternoon .ib-prog__event-sun-disc {
    background: radial-gradient(
        circle at 40% 40%,
        #ffc275 0%,
        #e89859 60%,
        #b06a3a 100%
    );
}
.ib-prog__event--dusk .ib-prog__event-sun-disc {
    background: radial-gradient(
        circle at 50% 30%,
        #ff8a5b 0%,
        #d65b3a 60%,
        #7a2a18 100%
    );
}
.ib-prog__event--night .ib-prog__event-sun-disc {
    background: radial-gradient(
        circle at 40% 40%,
        #2a3a5c 0%,
        #14223e 60%,
        #08101e 100%
    );
    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.15),
        0 0 12px color-mix(in srgb, #8fa8c4 30%, transparent);
}

.ib-prog__event-time {
    display: block;
    text-align: center;
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 2rem);
    line-height: 1;
    color: var(--ib-baobab-trunk);
    margin-bottom: 14px;
    margin-top: 4px;
}

.ib-prog__event-body {
    text-align: center;
}
.ib-prog__event-name {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.15rem, 3vw, 1.35rem);
    line-height: 1.3;
    color: var(--ib-baobab-trunk);
    margin: 0 0 12px;
}
.ib-prog__event-location {
    font-family: var(--inv2-font-body);
    font-size: 0.92rem;
    color: var(--tch-text);
    margin: 0 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ib-prog__event-location i {
    color: var(--tch-accent);
}
.ib-prog__event-address {
    font-family: var(--inv2-font-body);
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--tch-text) 72%, transparent);
    margin: 0 0 12px;
}
.ib-prog__event-desc {
    font-family: var(--inv2-font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--tch-text) 85%, transparent);
    margin: 12px 0;
}

/* Nav-strip event (Google Maps / Yango) */
.ib-prog__event-nav {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed
        color-mix(in srgb, var(--ib-gold-ray) 45%, transparent);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ib-prog__event-nav-label {
    font-family: var(--inv2-font-title);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--tch-accent);
    padding-left: 0.24em;
}
.ib-prog__event-nav-label i {
    margin-right: 4px;
}
.ib-prog__event-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.ib-prog__event-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: var(--inv2-font-body);
    font-size: 0.78rem;
    color: var(--ib-baobab-trunk);
    background: color-mix(in srgb, var(--tch-bg) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--ib-gold-ray) 45%, transparent);
    border-radius: 18px;
    text-decoration: none;
    transition: transform 0.2s var(--ib-ease-bird);
}
.ib-prog__event-nav-chip:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--tch-bg) 90%, transparent);
}

/* ── Calendrier (styling baobab par-dessus inv2-calendar) ─────────────
   Le markup conserve les classes inv2-calendar* (pour ne pas casser
   invitation.js) mais reçoit un wrapper baobab .ib-prog__calendar. ─── */
.ib-prog__calendar {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 32px 28px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tch-bg) 90%, transparent) 0%,
        color-mix(in srgb, var(--ib-savane-dust) 25%, transparent) 100%
    );
    border-radius: 16px;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--ib-gold-ray) 35%, transparent),
        0 12px 32px color-mix(in srgb, var(--ib-baobab-shadow) 20%, transparent);
}

/* ── prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ib-prog__event {
        transition: none;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .ib-prog {
        padding: 70px 5vw 60px;
    }
    .ib-prog__arc {
        height: 120px;
        padding: 16px 12px;
        margin-bottom: 36px;
    }
    .ib-prog__timeline {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .ib-prog__event-sun {
        width: 48px;
        height: 48px;
        top: -24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDRIER BAOBAB — « Les oiseaux messagers »
   Override CSS du markup inv2-calendar (conservé strict pour le JS). Chaque
   bouton (Google/Outlook/Apple) devient un oiseau-messager : silhouette
   d'aile en ::before, body dégradé ciel, hover = envol (translateY négatif).
   Le titre + sous-titre + hint reçoivent un styling baobab dédié.
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-prog__calendar .inv2-calendar__header {
    text-align: center;
    margin-bottom: 28px;
}
.ib-prog__calendar .inv2-calendar__title {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.3rem, 3.5vw, 1.6rem);
    line-height: 1.3;
    color: var(--ib-baobab-trunk);
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.ib-prog__calendar .inv2-calendar__title i {
    color: var(--tch-accent);
}
.ib-prog__calendar .inv2-calendar__subtitle {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-size: clamp(0.92rem, 2.2vw, 1.02rem);
    color: color-mix(in srgb, var(--tch-text) 78%, transparent);
    margin: 0 auto;
    max-width: 480px;
}

/* ── Boutons oiseaux-messagers ───────────────────────────────────────── */
.ib-prog__calendar .inv2-calendar__buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.ib-prog__calendar .inv2-calendar__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 18px 24px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-bg) 92%, var(--ib-sky-noon)) 0%,
        color-mix(in srgb, var(--ib-savane-dust) 30%, var(--tch-bg)) 100%
    );
    color: var(--ib-baobab-trunk);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--ib-gold-ray) 50%, transparent);
    border-radius: 14px;
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--ib-gold-ray) 35%, transparent),
        0 8px 22px color-mix(in srgb, var(--ib-baobab-shadow) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
    transition:
        transform 0.45s var(--ib-ease-bird),
        box-shadow 0.45s var(--ib-ease-savane);
    will-change: transform;
}

/* Silhouette d'oiseau-messager — V minimaliste en haut-droite, comme
   un envol vers l'horizon. Apparaît au hover. */
.ib-prog__calendar .inv2-calendar__btn::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16' fill='none' stroke='%23C6A15B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M 2 10 Q 8 2, 15 8 Q 22 2, 28 10'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.45;
    transform: translate(0, 0);
    transition:
        transform 0.55s var(--ib-ease-bird),
        opacity 0.4s var(--ib-ease-savane);
}
.ib-prog__calendar .inv2-calendar__btn:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--ib-gold-ray) 55%, transparent),
        0 16px 36px color-mix(in srgb, var(--ib-baobab-shadow) 32%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.ib-prog__calendar .inv2-calendar__btn:hover::before {
    opacity: 1;
    transform: translate(8px, -10px) rotate(-12deg) scale(1.2);
}

.ib-prog__calendar .inv2-calendar__btn-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%,
        color-mix(in srgb, var(--ib-gold-ray) 55%, #ffffff) 0%,
        var(--ib-gold-ray) 60%,
        color-mix(in srgb, var(--ib-gold-ray) 65%, var(--ib-baobab-shadow)) 100%
    );
    color: var(--ib-baobab-trunk);
    font-size: 1.15rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 4px 10px color-mix(in srgb, var(--ib-gold-ray) 40%, transparent);
}

.ib-prog__calendar .inv2-calendar__btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.ib-prog__calendar .inv2-calendar__btn-eyebrow {
    font-family: var(--inv2-font-title);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: color-mix(in srgb, var(--tch-text) 65%, transparent);
    padding-left: 0.24em;
}
.ib-prog__calendar .inv2-calendar__btn-label {
    font-family: var(--inv2-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(0.95rem, 2.4vw, 1.08rem);
    color: var(--ib-baobab-trunk);
}

.ib-prog__calendar .inv2-calendar__hint {
    text-align: center;
    font-family: var(--inv2-font-body);
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--tch-text) 65%, transparent);
    margin: 16px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}
.ib-prog__calendar .inv2-calendar__hint i {
    color: var(--tch-accent);
}

/* ── prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ib-prog__calendar .inv2-calendar__btn,
    .ib-prog__calendar .inv2-calendar__btn::before {
        transition: none;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .ib-prog__calendar {
        padding: 24px 20px;
    }
    .ib-prog__calendar .inv2-calendar__buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B.9 — RSVP « Libérer les oiseaux »
   Trois oiseaux par événement : colombe lumineuse (avec joie),
   hirondelle qui hésite (peut-être), oiseau qui se pose (en pensée).
   Le bouton sélectionné s'illumine et déclenche une mini-envolée.
   ═══════════════════════════════════════════════════════════════════════════ */
.ib-rsvp {
    position: relative;
    padding: 14vh 6vw 12vh;
    z-index: 2;
}

.ib-rsvp__indicator {
    color: color-mix(in srgb, var(--tch-primary) 75%, transparent);
}

.ib-rsvp__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
    position: relative;
}

.ib-rsvp__progress {
    margin: 0 auto 24px;
    display: block;
    width: 80px;
    height: 80px;
}

.ib-rsvp__eyebrow {
    display: inline-block;
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(0.78rem, 2.2vw, 0.92rem);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--tch-accent) 90%, var(--tch-primary) 10%);
    margin-bottom: 12px;
    padding: 4px 18px;
    border-top: 1px solid color-mix(in srgb, var(--tch-accent) 45%, transparent);
    border-bottom: 1px solid
        color-mix(in srgb, var(--tch-accent) 45%, transparent);
}

.ib-rsvp__title {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(1.9rem, 5.5vw, 3rem);
    font-weight: 500;
    color: var(--tch-primary);
    line-height: 1.15;
    margin: 8px 0 14px;
}

.ib-rsvp__subtitle {
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    color: color-mix(in srgb, var(--tch-primary) 75%, #000 25%);
    line-height: 1.6;
    margin: 0 auto 20px;
    max-width: 540px;
}

.ib-rsvp__social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tch-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 35%, transparent);
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--tch-primary) 85%, transparent);
}

.ib-rsvp__social i {
    color: var(--tch-accent);
    animation: ib-rsvp-feather-sway 4.5s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes ib-rsvp-feather-sway {
    0%,
    100% {
        transform: rotate(-6deg);
    }
    50% {
        transform: rotate(6deg);
    }
}

.ib-rsvp__greeting {
    text-align: center;
    margin: 0 auto 32px;
    max-width: 560px;
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    font-style: italic;
    color: color-mix(in srgb, var(--tch-primary) 80%, #000 20%);
}

/* ── Grille des événements ─────────────────────────────────────────────── */
.ib-rsvp__events {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 880px;
    margin: 0 auto 48px;
}

.ib-rsvp__event {
    position: relative;
    background: color-mix(in srgb, #fff 92%, var(--tch-accent) 8%);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 30%, transparent);
    border-radius: 18px;
    padding: 28px 24px 26px;
    box-shadow: 0 8px 24px -10px
        color-mix(in srgb, var(--tch-primary) 25%, transparent);
    overflow: hidden;
    transition: box-shadow 0.4s var(--ib-ease-savane);
}

.ib-rsvp__event::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        color-mix(in srgb, var(--tch-accent) 12%, transparent) 0%,
        transparent 60%
    );
    opacity: 0.7;
    pointer-events: none;
}

.ib-rsvp__event:hover {
    box-shadow: 0 14px 36px -12px
        color-mix(in srgb, var(--tch-primary) 35%, transparent);
}

.ib-rsvp__event-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    position: relative;
}

.ib-rsvp__event-time {
    flex: 0 0 auto;
    background: var(--tch-primary);
    color: #fff;
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.08em;
}

.ib-rsvp__event-name {
    flex: 1;
    margin: 0;
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(1.2rem, 3.4vw, 1.55rem);
    font-weight: 500;
    color: var(--tch-primary);
    line-height: 1.2;
}

.ib-rsvp__event-question {
    margin: 0 0 22px;
    font-size: 0.98rem;
    font-style: italic;
    color: color-mix(in srgb, var(--tch-primary) 75%, #000 25%);
    line-height: 1.55;
    position: relative;
}

/* ── Trois oiseaux côte à côte ─────────────────────────────────────────── */
.ib-rsvp__responses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    position: relative;
}

.ib-rsvp__bird {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 110px;
    padding: 16px 10px 14px;
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--tch-primary) 18%, transparent);
    background: color-mix(in srgb, #fff 94%, var(--tch-primary) 6%);
    color: color-mix(in srgb, var(--tch-primary) 80%, transparent);
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 0.95rem;
    cursor: pointer;
    transition:
        transform 0.4s var(--ib-ease-bird),
        background 0.4s ease,
        border-color 0.4s ease,
        color 0.3s ease,
        box-shadow 0.4s var(--ib-ease-savane);
    overflow: hidden;
}

.ib-rsvp__bird:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tch-accent) 60%, transparent);
    color: var(--tch-primary);
}

.ib-rsvp__bird:focus-visible {
    outline: 2px solid var(--tch-accent);
    outline-offset: 3px;
}

.ib-rsvp__bird-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    position: relative;
    z-index: 2;
}

.ib-rsvp__bird-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ib-rsvp__bird-label {
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 2;
}

/* — Variante colombe (Avec joie) — */
.ib-rsvp__bird--dove .ib-rsvp__bird-icon {
    animation: ib-dove-idle 3.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ib-dove-idle {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-2px) rotate(1deg);
    }
}

.ib-rsvp__bird--dove:hover .ib-rsvp__bird-icon {
    animation: ib-dove-flap 0.7s ease-in-out infinite;
}

@keyframes ib-dove-flap {
    0%,
    100% {
        transform: translateY(-1px) scaleX(1);
    }
    50% {
        transform: translateY(-5px) scaleX(0.85);
    }
}

/* — Variante hirondelle hésitante (Peut-être) — */
.ib-rsvp__bird--hover .ib-rsvp__bird-icon {
    animation: ib-bird-hover-wobble 2.6s ease-in-out infinite;
}

@keyframes ib-bird-hover-wobble {
    0%,
    100% {
        transform: translateX(0) rotate(-2deg);
    }
    25% {
        transform: translateX(-2px) rotate(2deg);
    }
    50% {
        transform: translateX(0) rotate(-2deg);
    }
    75% {
        transform: translateX(2px) rotate(2deg);
    }
}

/* — Variante oiseau posé (En pensée) — */
.ib-rsvp__bird--perched .ib-rsvp__bird-icon {
    animation: ib-bird-perched-breathe 4.2s ease-in-out infinite;
}

@keyframes ib-bird-perched-breathe {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-1px) scale(1.02);
    }
}

/* ── État sélectionné : l'oiseau choisi s'illumine ─────────────────────── */
.ib-rsvp__bird.selected {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--tch-accent) 18%, #fff 82%) 0%,
        color-mix(in srgb, var(--tch-accent) 8%, #fff 92%) 100%
    );
    border-color: var(--tch-accent);
    color: var(--tch-primary);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 60%, transparent),
        0 14px 32px -10px color-mix(in srgb, var(--tch-accent) 55%, transparent);
}

.ib-rsvp__bird.selected::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 35%,
        color-mix(in srgb, var(--tch-accent) 35%, transparent) 0%,
        transparent 65%
    );
    opacity: 0;
    animation: ib-bird-halo 0.9s var(--ib-ease-savane) forwards;
    pointer-events: none;
}

@keyframes ib-bird-halo {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Colombe sélectionnée : envol vers le ciel */
.ib-rsvp__bird--dove.selected .ib-rsvp__bird-icon {
    animation:
        ib-dove-takeoff 1.1s var(--ib-ease-bird) 1,
        ib-dove-flap 0.55s ease-in-out infinite 1.1s;
}

@keyframes ib-dove-takeoff {
    0% {
        transform: translateY(0) scale(1);
    }
    35% {
        transform: translateY(-6px) scale(1.05);
    }
    100% {
        transform: translateY(-3px) scale(1.08);
    }
}

/* Hirondelle sélectionnée : ouvre ses ailes pleinement */
.ib-rsvp__bird--hover.selected .ib-rsvp__bird-icon {
    animation: ib-bird-hover-deploy 0.9s var(--ib-ease-bird) forwards;
}

@keyframes ib-bird-hover-deploy {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(1.15);
    }
    100% {
        transform: scaleX(1.08);
    }
}

/* Oiseau posé sélectionné : se redresse fièrement */
.ib-rsvp__bird--perched.selected .ib-rsvp__bird-icon {
    animation: ib-bird-perched-rise 0.8s var(--ib-ease-bird) forwards;
}

@keyframes ib-bird-perched-rise {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-2px) scale(1.06);
    }
}

/* Quand un oiseau est sélectionné dans un event, les deux autres s'estompent légèrement */
.ib-rsvp__event:has(.ib-rsvp__bird.selected) .ib-rsvp__bird:not(.selected) {
    opacity: 0.45;
    filter: saturate(0.7);
}

/* Plumes flottantes à la sélection — pseudo-élément après le bouton */
.ib-rsvp__bird.selected::after {
    content: "✦";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.65rem;
    color: var(--tch-accent);
    animation: ib-bird-sparkle 1.6s ease-out forwards;
}

@keyframes ib-bird-sparkle {
    0% {
        opacity: 0;
        transform: translateY(4px) scale(0.6);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(1.2);
    }
}

/* ── Bloc post-réponse : coordonnées + message + récap ─────────────────── */
.ib-rsvp__after-questions {
    max-width: 720px;
    margin: 32px auto 0;
}

.ib-rsvp__identity,
.ib-rsvp__message {
    background: color-mix(in srgb, #fff 95%, var(--tch-primary) 5%);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 25%, transparent);
    border-radius: 16px;
    padding: 26px 22px 22px;
    margin-bottom: 24px;
    position: relative;
}

.ib-rsvp__identity .inv2-identity-icon,
.ib-rsvp__message .inv2-message-icon {
    color: var(--tch-accent);
}

.ib-rsvp__identity .inv2-identity-title,
.ib-rsvp__message .inv2-message-title {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    color: var(--tch-primary);
    font-weight: 500;
}

.ib-rsvp__message .inv2-message-icon i {
    animation: ib-rsvp-feather-sway 4s ease-in-out infinite;
    display: inline-block;
    transform-origin: bottom center;
}

/* ── LISIBILITÉ DU FORMULAIRE ────────────────────────────────────────────
   Les styles .inv2-identity-* et .inv-rsvp-section .inv-input du moteur
   base (invitation.css) sont conçus pour un fond SOMBRE — couleurs blanc
   semi-transparent. Dans Baobab, les cartes .ib-rsvp__identity et
   .ib-rsvp__message ont un fond CLAIR : on doit réinverser le contraste
   pour ne pas avoir du texte blanc-sur-blanc invisible. */

/* Sous-titres : texte de contexte sous chaque section */
.ib-rsvp__identity .inv2-identity-subtitle,
.ib-rsvp__message .inv2-message-subtitle {
    color: color-mix(in srgb, var(--tch-primary) 70%, transparent);
}
.ib-rsvp__message .inv2-message-subtitle em {
    color: var(--tch-accent);
    font-style: italic;
}

/* Labels des champs : nom, numéro, email */
.ib-rsvp__identity .inv2-identity-field label,
.ib-rsvp .inv-rsvp-section .inv-name-field label {
    color: color-mix(in srgb, var(--tch-primary) 85%, transparent);
    font-weight: 600;
}

/* Inputs et textarea : fond crème + bordure or + texte primary */
.ib-rsvp__identity .inv2-identity-field .inv-input,
.ib-rsvp__message .inv2-textarea,
.ib-rsvp .inv-rsvp-section .inv-input {
    background: color-mix(in srgb, #FFF 96%, var(--tch-accent) 4%);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 40%, transparent);
    color: var(--tch-primary);
}
.ib-rsvp__identity .inv2-identity-field .inv-input::placeholder,
.ib-rsvp__message .inv2-textarea::placeholder,
.ib-rsvp .inv-rsvp-section .inv-input::placeholder {
    color: color-mix(in srgb, var(--tch-primary) 45%, transparent);
}
.ib-rsvp__identity .inv2-identity-field .inv-input:focus,
.ib-rsvp__message .inv2-textarea:focus,
.ib-rsvp .inv-rsvp-section .inv-input:focus {
    border-color: var(--tch-accent);
    background: #FFF;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tch-accent) 25%, transparent);
}

/* Mention « facultatif » à côté du label email */
.ib-rsvp__identity .inv2-identity-optional {
    color: var(--tch-accent);
}

/* Aide sous chaque champ (helper text italique) */
.ib-rsvp__identity .inv2-identity-help {
    color: color-mix(in srgb, var(--tch-primary) 60%, transparent);
}

/* Compteur de caractères en bas du textarea message */
.ib-rsvp__message .inv2-message-counter {
    color: color-mix(in srgb, var(--tch-primary) 45%, transparent);
}

/* Icône de l'identité (user-circle) au-dessus du formulaire */
.ib-rsvp__identity .inv2-identity-icon {
    background: color-mix(in srgb, var(--tch-accent) 12%, transparent);
    color: var(--tch-accent);
}

/* Container de section message : fond légèrement teinté or */
.ib-rsvp__message {
    background: color-mix(in srgb, #FFF 92%, var(--tch-accent) 8%);
}

.ib-rsvp__summary {
    text-align: center;
    padding: 28px 22px 22px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tch-accent) 10%, #fff 90%) 0%,
        color-mix(in srgb, var(--tch-primary) 6%, #fff 94%) 100%
    );
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--tch-accent) 35%, transparent);
}

.ib-rsvp__summary h3 {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    color: var(--tch-primary);
    font-size: clamp(1.2rem, 3.2vw, 1.5rem);
    margin: 0 0 18px;
}

.ib-rsvp__submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(
        135deg,
        var(--tch-accent) 0%,
        color-mix(in srgb, var(--tch-accent) 70%, var(--tch-primary) 30%) 100%
    );
    color: #fff;
    border: none;
    padding: 16px 36px;
    border-radius: 999px;
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 14px 32px -10px
        color-mix(in srgb, var(--tch-accent) 55%, transparent);
    transition:
        transform 0.3s var(--ib-ease-bird),
        box-shadow 0.3s ease;
}

.ib-rsvp__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -10px
        color-mix(in srgb, var(--tch-accent) 65%, transparent);
}

.ib-rsvp__submit:focus-visible {
    outline: 2px solid var(--tch-primary);
    outline-offset: 3px;
}

.ib-rsvp__submit i {
    transition: transform 0.4s var(--ib-ease-bird);
}

.ib-rsvp__submit:hover i {
    transform: translateX(4px) rotate(-12deg);
}

/* ── Reduced motion : tous les vols se calment ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ib-rsvp__bird,
    .ib-rsvp__bird .ib-rsvp__bird-icon,
    .ib-rsvp__social i,
    .ib-rsvp__message .inv2-message-icon i,
    .ib-rsvp__bird.selected::before,
    .ib-rsvp__bird.selected::after {
        animation: none !important;
        transition: none !important;
    }
    .ib-rsvp__bird:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Décor permanent resserré, particules moins nombreuses (perfs).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .ib-decor-baobab {
        width: 55vw;
        height: 38vh;
        opacity: 0.7;
    }
    .ib-decor-sun {
        width: 38vw;
        height: 38vw;
    }
    .ib-decor-grasses {
        height: 12vh;
    }
    /* Pétales : on en cache la moitié sur mobile pour économiser la batterie */
    .ib-decor-petals span:nth-child(2n) {
        display: none;
    }
    /* RSVP mobile : padding allégé, oiseaux empilés en colonne stable */
    .ib-rsvp {
        padding: 10vh 4vw 8vh;
    }
    .ib-rsvp__event {
        padding: 22px 16px 20px;
    }
    .ib-rsvp__event-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ib-rsvp__responses {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ib-rsvp__bird {
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        min-height: 64px;
        padding: 12px 16px;
        text-align: left;
    }
    .ib-rsvp__bird-icon {
        width: 36px;
        height: 30px;
        flex: 0 0 36px;
    }
    .ib-rsvp__bird-label {
        font-size: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B.10 — Widget musique « Soleil rayonnant » + WhatsApp « Oiseau-messager »
   Scope strictement limité aux pages Baobab via body.theme-baobab-page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MUSIQUE : transformation totale du joyau en soleil rayonnant ────────
   Le disque devient un soleil doré central avec couronne de 12 rayons.
   En lecture : les rayons pulsent en cascade, ondes sonores dorées
   émanent du centre. Variables CSS dérivées des couleurs mariage.

   POSITIONNEMENT : les rayons (.inv-bg-music__ring inset:-22px) débordent du
   bouton sur tous les axes. Le top de base (28px desktop / 18px mobile) défini
   dans invitation.css faisait que la couronne de rayons venait toucher le bord
   supérieur du viewport (et était masquée par .demo-banner en mode démo). On
   rehausse le top pour laisser respirer les rayons. */
body.theme-baobab-page .inv-bg-music {
    --ib-sun-core: color-mix(in srgb, var(--tch-accent) 90%, #fff 10%);
    --ib-sun-edge: color-mix(
        in srgb,
        var(--tch-accent) 70%,
        var(--tch-primary) 30%
    );
    --ib-sun-ray-color: var(--tch-accent);
    --ib-sun-halo: color-mix(in srgb, var(--tch-accent) 35%, transparent);
}

/* Mobile : widget en BAS À GAUCHE — la zone droite est déjà chargée par
   le bouton WhatsApp (.inv-share-whatsapp bottom:24px right:16px) et
   d'autres CTAs. On équilibre la composition en plaçant le soleil
   musical à gauche. left:40px pour accommoder les rayons et l'aura
   (~33px de débord), bottom:24px pour s'aligner verticalement avec le
   bouton WhatsApp et créer une symétrie visuelle. */
@media (max-width: 767px) {
    body.theme-baobab-page .inv-bg-music {
        top: auto;
        right: auto;
        left: 40px;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

/* Desktop : conservation de la position haut-droite originale, avec marge
   verticale pour les rayons solaires. */
@media (min-width: 768px) {
    body.theme-baobab-page .inv-bg-music {
        top: 56px;
    }
}

/* Mode démo desktop : décale sous .demo-banner (top:0, z:10000, ~55px en
   desktop sur 1 ligne). Mobile n'est pas concerné puisque le widget est
   désormais en bas. */
@media (min-width: 768px) {
    body.theme-baobab-page.is-demo-mode .inv-bg-music {
        top: 100px;
    }
}

/* Bouton : on supprime le fond circulaire neutre, le soleil le remplace */
body.theme-baobab-page .inv-bg-music__btn {
    background: transparent;
    border-radius: 50%;
    overflow: visible;
    filter: drop-shadow(
        0 8px 20px color-mix(in srgb, var(--ib-sun-ray-color) 45%, transparent)
    );
    transition:
        transform 0.4s var(--ib-ease-bird),
        filter 0.4s ease;
}

body.theme-baobab-page .inv-bg-music__btn:hover {
    transform: rotate(8deg) scale(1.06);
    filter: drop-shadow(
        0 12px 28px color-mix(in srgb, var(--ib-sun-ray-color) 65%, transparent)
    );
}

/* L'aura existante devient le halo rayonnant du soleil */
body.theme-baobab-page .inv-bg-music__aura {
    background: radial-gradient(
        circle,
        var(--ib-sun-halo) 0%,
        color-mix(in srgb, var(--ib-sun-ray-color) 18%, transparent) 35%,
        transparent 70%
    );
    inset: -55%;
    filter: blur(8px);
}

body.theme-baobab-page .inv-bg-music--playing .inv-bg-music__aura {
    animation: ib-sun-halo-pulse 3.5s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes ib-sun-halo-pulse {
    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.9;
    }
}

/* L'anneau extérieur devient la couronne de 12 rayons solaires.
   On utilise conic-gradient pour générer les rayons en CSS pur. */
body.theme-baobab-page .inv-bg-music__ring {
    inset: -22px;
    border: none;
    background: conic-gradient(
        from 0deg,
        var(--ib-sun-ray-color) 0deg 6deg,
        transparent 6deg 30deg,
        var(--ib-sun-ray-color) 30deg 36deg,
        transparent 36deg 60deg,
        var(--ib-sun-ray-color) 60deg 66deg,
        transparent 66deg 90deg,
        var(--ib-sun-ray-color) 90deg 96deg,
        transparent 96deg 120deg,
        var(--ib-sun-ray-color) 120deg 126deg,
        transparent 126deg 150deg,
        var(--ib-sun-ray-color) 150deg 156deg,
        transparent 156deg 180deg,
        var(--ib-sun-ray-color) 180deg 186deg,
        transparent 186deg 210deg,
        var(--ib-sun-ray-color) 210deg 216deg,
        transparent 216deg 240deg,
        var(--ib-sun-ray-color) 240deg 246deg,
        transparent 246deg 270deg,
        var(--ib-sun-ray-color) 270deg 276deg,
        transparent 276deg 300deg,
        var(--ib-sun-ray-color) 300deg 306deg,
        transparent 306deg 330deg,
        var(--ib-sun-ray-color) 330deg 336deg,
        transparent 336deg 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%, #000 100%);
    mask: radial-gradient(circle, transparent 50%, #000 52%, #000 100%);
    opacity: 0.85;
    transform-origin: center;
}

body.theme-baobab-page .inv-bg-music--playing .inv-bg-music__ring {
    animation:
        ib-sun-rays-rotate 22s linear infinite,
        ib-sun-rays-pulse 2.4s ease-in-out infinite;
    opacity: 1;
}

@keyframes ib-sun-rays-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes ib-sun-rays-pulse {
    0%,
    100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.25) saturate(1.3);
    }
}

/* Le joyau devient le DISQUE SOLAIRE central — dégradé chaud or, pas de rotation
   vinyle (on remplace par une légère pulsation). */
/* Gradient SIMPLIFIÉ : on évite toute mixture avec --tch-primary qui
   créait un disque brun-rouge sombre quand la palette mariage utilisait
   un primary chaud (burgundy/bordeaux). Le disque reste désormais un
   vrai soleil doré uniforme quelle que soit la palette. */
body.theme-baobab-page .inv-bg-music__jewel {
    background: radial-gradient(
        circle at 32% 30%,
        #fff7e0 0%,
        color-mix(in srgb, var(--ib-sun-ray-color) 65%, #fff 35%) 25%,
        var(--ib-sun-ray-color) 65%,
        color-mix(in srgb, var(--ib-sun-ray-color) 88%, #8b5a2b 12%) 100%
    );
    box-shadow:
        inset 0 3px 8px rgba(255, 255, 255, 0.6),
        inset 0 -4px 10px
            color-mix(in srgb, var(--ib-sun-ray-color) 50%, #b8743a 50%),
        0 0 24px color-mix(in srgb, var(--ib-sun-ray-color) 65%, transparent),
        0 0 48px color-mix(in srgb, var(--ib-sun-ray-color) 35%, transparent);
    animation: none;
}

body.theme-baobab-page .inv-bg-music--playing .inv-bg-music__jewel {
    animation: ib-sun-disc-breathe 3.2s ease-in-out infinite;
}

@keyframes ib-sun-disc-breathe {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            inset 0 3px 8px rgba(255, 255, 255, 0.6),
            inset 0 -4px 10px
                color-mix(in srgb, var(--ib-sun-ray-color) 50%, #b8743a 50%),
            0 0 24px
                color-mix(in srgb, var(--ib-sun-ray-color) 65%, transparent),
            0 0 48px
                color-mix(in srgb, var(--ib-sun-ray-color) 35%, transparent);
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            inset 0 3px 10px rgba(255, 255, 255, 0.75),
            inset 0 -4px 10px
                color-mix(in srgb, var(--ib-sun-ray-color) 50%, #b8743a 50%),
            0 0 36px
                color-mix(in srgb, var(--ib-sun-ray-color) 85%, transparent),
            0 0 64px
                color-mix(in srgb, var(--ib-sun-ray-color) 50%, transparent);
    }
}

/* Les grooves vinyle deviennent des cercles concentriques solaires plus subtils */
body.theme-baobab-page .inv-bg-music__grooves {
    background: repeating-radial-gradient(
        circle at center,
        transparent 0,
        transparent 3px,
        color-mix(in srgb, #fff 35%, transparent) 3.5px,
        transparent 4px
    );
    opacity: 0.4;
}

/* Le label central — on garde le pictogramme musique en blanc lumineux */
body.theme-baobab-page .inv-bg-music__center {
    color: #fff;
    text-shadow: 0 2px 6px
        color-mix(in srgb, var(--tch-primary) 60%, transparent);
}

/* Particules : on en fait des grains de lumière dorés qui montent */
body.theme-baobab-page .inv-bg-music__particles span {
    background: radial-gradient(
        circle,
        var(--ib-sun-ray-color) 0%,
        transparent 70%
    );
    filter: blur(0.5px);
}

/* ── WHATSAPP : oiseau-messager qui s'envole au hover ─────────────────────
   On garde le vert WhatsApp (codes couleur de la marque WhatsApp, non
   négociable) mais on transforme la forme : pilule ronde-or, icône
   FontAwesome WhatsApp surmontée d'une petite hirondelle SVG via ::after. */
body.theme-baobab-page .inv-share-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    border-radius: 999px;
    padding: 12px 20px;
    box-shadow:
        0 6px 20px rgba(37, 211, 102, 0.4),
        0 0 0 1px color-mix(in srgb, var(--ib-sun-ray-color) 30%, transparent);
    position: fixed;
    transition:
        transform 0.4s var(--ib-ease-bird),
        box-shadow 0.4s ease;
}

/* Hirondelle stylisée qui plane au-dessus du bouton */
body.theme-baobab-page .inv-share-whatsapp::after {
    content: "";
    position: absolute;
    top: -14px;
    right: 14px;
    width: 26px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'><path d='M 2 10 Q 8 2, 15 8 Q 22 2, 28 10' fill='none' stroke='%23E8A87C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transform: translate(0, 4px);
    transition:
        opacity 0.4s ease,
        transform 0.6s var(--ib-ease-bird);
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

body.theme-baobab-page .inv-share-whatsapp:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 12px 30px rgba(37, 211, 102, 0.55),
        0 0 0 2px color-mix(in srgb, var(--ib-sun-ray-color) 50%, transparent);
}

/* Au hover : l'hirondelle décolle vers le haut-droite */
body.theme-baobab-page .inv-share-whatsapp:hover::after {
    opacity: 1;
    transform: translate(8px, -6px) rotate(-12deg);
    animation: ib-whatsapp-bird-flap 0.8s ease-in-out infinite;
}

@keyframes ib-whatsapp-bird-flap {
    0%,
    100% {
        transform: translate(8px, -6px) rotate(-12deg) scaleX(1);
    }
    50% {
        transform: translate(10px, -9px) rotate(-8deg) scaleX(0.7);
    }
}

/* L'icône FontAwesome WhatsApp existante reste — on lui donne juste un
   léger effet de brillance dorée au hover. */
body.theme-baobab-page .inv-share-whatsapp i {
    transition: filter 0.3s ease;
}

body.theme-baobab-page .inv-share-whatsapp:hover i {
    filter: drop-shadow(
        0 0 4px color-mix(in srgb, var(--ib-sun-ray-color) 60%, transparent)
    );
}

/* ── Reduced motion : on neutralise toutes les animations des widgets ───── */
@media (prefers-reduced-motion: reduce) {
    body.theme-baobab-page .inv-bg-music__aura,
    body.theme-baobab-page .inv-bg-music__ring,
    body.theme-baobab-page .inv-bg-music__jewel,
    body.theme-baobab-page .inv-share-whatsapp::after {
        animation: none !important;
    }
    body.theme-baobab-page .inv-bg-music__btn:hover,
    body.theme-baobab-page .inv-share-whatsapp:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B.11 — Scroll-nav « soleil qui monte/descend » + Progress bar « du jour »
   Le chevron FontAwesome est masqué, remplacé par un mini-soleil avec rayons.
   Bouton up = soleil naissant qui s'élève ; down = soleil qui plonge.
   Progress bar : gradient aube doré → midi blanc → crépuscule orangé.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll-nav buttons : transformation en mini-soleils ──────────────── */
body.theme-baobab-page .inv-scroll-nav__btn {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tch-primary) 85%, transparent) 0%,
        color-mix(in srgb, var(--tch-primary) 95%, transparent) 100%
    );
    border: 1.5px solid color-mix(in srgb, var(--tch-accent) 60%, transparent);
    overflow: visible;
    position: relative;
    color: transparent; /* masque le chevron FontAwesome */
}

/* On cache l'icône FA chevron (le glyphe reste pour a11y/lecteur d'écran via aria-label) */
body.theme-baobab-page .inv-scroll-nav__btn i {
    opacity: 0;
}

/* Le disque solaire central (pseudo-elt qui remplace l'icône) */
body.theme-baobab-page .inv-scroll-nav__btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 32%,
        color-mix(in srgb, var(--tch-accent) 95%, #fff 5%) 0%,
        var(--tch-accent) 55%,
        color-mix(in srgb, var(--tch-accent) 60%, var(--tch-primary) 40%) 100%
    );
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tch-accent) 65%, transparent);
    transition: transform 0.4s var(--ib-ease-bird);
}

/* Les rayons solaires en conic-gradient autour du disque */
body.theme-baobab-page .inv-scroll-nav__btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        var(--tch-accent) 0deg 4deg,
        transparent 4deg 45deg,
        var(--tch-accent) 45deg 49deg,
        transparent 49deg 90deg,
        var(--tch-accent) 90deg 94deg,
        transparent 94deg 135deg,
        var(--tch-accent) 135deg 139deg,
        transparent 139deg 180deg,
        var(--tch-accent) 180deg 184deg,
        transparent 184deg 225deg,
        var(--tch-accent) 225deg 229deg,
        transparent 229deg 270deg,
        var(--tch-accent) 270deg 274deg,
        transparent 274deg 315deg,
        var(--tch-accent) 315deg 319deg,
        transparent 319deg 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, #000 100%);
    mask: radial-gradient(circle, transparent 30%, #000 32%, #000 100%);
    opacity: 0.7;
    transition:
        transform 0.5s var(--ib-ease-savane),
        opacity 0.3s ease;
    pointer-events: none;
}

/* Variante UP : le soleil émerge d'en bas (rayons tronqués au-dessus de l'horizon) */
body.theme-baobab-page .inv-scroll-nav__btn--up::before {
    transform: translate(-50%, -30%);
}
body.theme-baobab-page .inv-scroll-nav__btn--up::after {
    transform: translate(-50%, -30%);
}

/* Variante DOWN : le soleil descend (rayons tronqués en bas) */
body.theme-baobab-page .inv-scroll-nav__btn--down::before {
    transform: translate(-50%, -70%);
}
body.theme-baobab-page .inv-scroll-nav__btn--down::after {
    transform: translate(-50%, -70%);
}

/* Hover : le soleil s'illumine et les rayons s'écartent */
body.theme-baobab-page .inv-scroll-nav__btn:hover {
    background: color-mix(in srgb, var(--tch-primary) 80%, transparent);
    border-color: var(--tch-accent);
    transform: scale(1.08);
}

body.theme-baobab-page .inv-scroll-nav__btn:hover::before {
    box-shadow: 0 0 20px color-mix(in srgb, var(--tch-accent) 85%, transparent);
}

body.theme-baobab-page .inv-scroll-nav__btn--up:hover::after {
    transform: translate(-50%, -34%) rotate(15deg);
    opacity: 1;
}

body.theme-baobab-page .inv-scroll-nav__btn--down:hover::after {
    transform: translate(-50%, -66%) rotate(-15deg);
    opacity: 1;
}

body.theme-baobab-page .inv-scroll-nav__btn:active {
    transform: scale(0.95);
}

body.theme-baobab-page .inv-scroll-nav__btn:focus-visible {
    outline: 2px solid var(--tch-accent);
    outline-offset: 4px;
}

/* État masqué : le soleil pâlit (quand on est tout en haut ou tout en bas) */
body.theme-baobab-page .inv-scroll-nav__btn--hidden::before {
    opacity: 0.4;
}
body.theme-baobab-page .inv-scroll-nav__btn--hidden::after {
    opacity: 0.25;
}

/* ── Progress bar : dégradé de la journée ──────────────────────────────────
   Aube doré → midi blanc lumineux → crépuscule orangé.
   Le fil indique la position dans le cycle du jour de la cérémonie. */
body.theme-baobab-page .inv-progress {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 92%, var(--tch-accent) 8%) 0%,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 98%, transparent) 100%
    );
    border-bottom: 1px solid
        color-mix(in srgb, var(--tch-accent) 35%, transparent);
}

body.theme-baobab-page .inv-progress__bar {
    background: color-mix(in srgb, var(--tch-primary) 12%, transparent);
    height: 8px;
    border-radius: 4px;
    position: relative;
    overflow: visible; /* permet au soleil de dépasser */
}

body.theme-baobab-page .inv-progress__fill {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--tch-accent) 85%, #fff 15%) 0%,
        #ffe9b5 30%,
        #fff7e1 50%,
        color-mix(in srgb, var(--tch-accent) 70%, #e8a87c 30%) 80%,
        color-mix(in srgb, #e8a87c 85%, var(--tch-primary) 15%) 100%
    );
    box-shadow: 0 0 12px color-mix(in srgb, var(--tch-accent) 55%, transparent);
    border-radius: 4px;
    position: relative;
}

/* Petit soleil qui suit la barre — positionné au bout du fill */
body.theme-baobab-page .inv-progress__fill::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 32%,
        #fff 0%,
        var(--tch-accent) 60%,
        color-mix(in srgb, var(--tch-accent) 60%, var(--tch-primary) 40%) 100%
    );
    transform: translateY(-50%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--tch-accent) 75%, transparent);
    animation: ib-progress-sun-pulse 2.4s ease-in-out infinite;
}

@keyframes ib-progress-sun-pulse {
    0%,
    100% {
        box-shadow: 0 0 12px
            color-mix(in srgb, var(--tch-accent) 65%, transparent);
    }
    50% {
        box-shadow: 0 0 20px
            color-mix(in srgb, var(--tch-accent) 90%, transparent);
    }
}

body.theme-baobab-page .inv-progress__text {
    color: var(--tch-primary);
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
}

/* Reduced motion : le soleil de la barre ne pulse plus */
@media (prefers-reduced-motion: reduce) {
    body.theme-baobab-page .inv-progress__fill::after {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B.12 — Toasts émotionnels « Le vent murmure »
   Au lieu d'apparaître depuis le bas, le toast Baobab arrive latéralement
   poussé par le vent, avec une feuille flottante en préfixe. Le texte est
   en italique cursive, sur fond crème translucide bordé d'or.
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-baobab-page .emotional-toast {
    bottom: auto;
    top: 32%;
    left: -50px;
    right: auto;
    transform: translateX(-100%);
    transition: all 0.9s var(--ib-ease-savane);
}

body.theme-baobab-page .emotional-toast.is-visible {
    left: 5vw;
    transform: translateX(0);
}

body.theme-baobab-page .emotional-toast__text {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 92%, var(--tch-accent) 8%) 0%,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 88%, var(--tch-accent) 12%)
            100%
    );
    color: var(--tch-primary);
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    padding: 16px 28px 16px 56px; /* place pour la feuille en préfixe */
    border-radius: 4px 24px 24px 4px; /* coin gauche carré comme une stèle */
    border-left: 3px solid var(--tch-accent);
    box-shadow:
        0 12px 32px -8px color-mix(in srgb, var(--tch-primary) 25%, transparent),
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 30%, transparent);
    position: relative;
    white-space: normal;
    max-width: min(420px, 80vw);
    backdrop-filter: blur(14px);
}

/* Feuille flottante à gauche du texte */
body.theme-baobab-page .emotional-toast__text::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M 16 4 Q 26 8, 28 18 Q 26 26, 16 28 Q 6 26, 4 18 Q 6 8, 16 4 Z M 16 4 Q 16 16, 16 28' fill='none' stroke='%23E8A87C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    animation: ib-leaf-flutter 3s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes ib-leaf-flutter {
    0%,
    100% {
        transform: translateY(-50%) rotate(-8deg);
    }
    50% {
        transform: translateY(-52%) rotate(10deg);
    }
}

/* Petites lignes de vent qui suivent le toast à son apparition */
body.theme-baobab-page .emotional-toast__text::after {
    content: "";
    position: absolute;
    left: -36px;
    top: 50%;
    width: 30px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'><path d='M 2 4 Q 12 1, 22 4 M 2 8 Q 12 5, 18 8 M 2 11 Q 8 9, 14 11' fill='none' stroke='%23E8A87C' stroke-width='1.2' stroke-linecap='round' opacity='0.55'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

body.theme-baobab-page
    .emotional-toast.is-visible
    .emotional-toast__text::after {
    opacity: 1;
    animation: ib-wind-streaks 1.8s ease-out;
}

@keyframes ib-wind-streaks {
    0% {
        transform: translateY(-50%) translateX(-12px);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 0.55;
    }
}

/* Mobile : centré classique mais conserve la feuille et le ton vent */
@media (max-width: 639px) {
    body.theme-baobab-page .emotional-toast {
        top: auto;
        bottom: 80px;
        left: 50%;
        transform: translate(-100vw, 0);
    }
    body.theme-baobab-page .emotional-toast.is-visible {
        left: 50%;
        transform: translate(-50%, 0);
    }
    body.theme-baobab-page .emotional-toast__text {
        font-size: 0.98rem;
        padding: 14px 22px 14px 50px;
        max-width: 86vw;
    }
}

/* Badge émotionnel (haut de page) : on lui donne aussi la signature baobab */
body.theme-baobab-page .emotional-badge {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 95%, var(--tch-accent) 5%),
        color-mix(in srgb, var(--tch-bg, #fff7ea) 90%, var(--tch-accent) 10%)
    );
    color: var(--tch-primary);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 45%, transparent);
}

/* Reduced motion : feuille et vent statiques */
@media (prefers-reduced-motion: reduce) {
    body.theme-baobab-page .emotional-toast,
    body.theme-baobab-page .emotional-toast__text::before,
    body.theme-baobab-page .emotional-toast__text::after {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
}

/* Secret + Scroll-milestone — mêmes tonalités stèle ivoire que le toast */
body.theme-baobab-page .emotional-secret__text {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 95%, var(--tch-accent) 5%),
        color-mix(in srgb, var(--tch-bg, #fff7ea) 88%, var(--tch-accent) 12%)
    );
    color: var(--tch-primary);
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-style: italic;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--tch-accent) 50%, transparent);
    border-left: 3px solid var(--tch-accent);
    border-radius: 4px 24px 24px 4px;
    box-shadow:
        0 24px 56px -12px color-mix(in srgb, var(--tch-primary) 30%, transparent),
        0 0 0 1px color-mix(in srgb, var(--tch-accent) 30%, transparent);
}
body.theme-baobab-page .scroll-milestone-toast {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--tch-bg, #fff7ea) 92%, var(--tch-accent) 8%),
        color-mix(in srgb, var(--tch-bg, #fff7ea) 86%, var(--tch-accent) 14%)
    );
    color: var(--tch-primary);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 40%, transparent);
    border-left: 3px solid var(--tch-accent);
    border-radius: 4px 24px 24px 4px;
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-style: italic;
}
body.theme-baobab-page .scroll-milestone-bar {
    background: linear-gradient(90deg, var(--tch-accent), color-mix(in srgb, var(--tch-accent) 70%, #fff));
}

/* ═══════════════════════════════════════════════════════════════════════════
   B.13 — Sections uniques Baobab : RETIRÉES du thème
   Les sections « Le Vent des Paroles » et « Le Cycle des Récoltes » ont
   été retirées. Le thème ne porte plus de section unique additionnelle ;
   « Notre Histoire » devient la signature narrative du thème.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   B.14 — Footer « au crépuscule » + finition responsive mobile complète
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Footer crépuscule ──────────────────────────────────────────────────── */
.ib-footer {
    position: relative;
    padding: 0;
    margin-top: 4vh;
    background: transparent;
    overflow: hidden;
}

.ib-footer__horizon {
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: 0;
}

.ib-footer__horizon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Couleurs du dégradé crépuscule via stops variabilisés */
.ib-svg-stop-twilight-top {
    stop-color: color-mix(in srgb, var(--tch-primary) 75%, #4a2d5c 25%);
}
.ib-svg-stop-twilight-mid {
    stop-color: color-mix(in srgb, var(--tch-accent) 50%, #e8a87c 50%);
}
.ib-svg-stop-twilight-bottom {
    stop-color: color-mix(in srgb, var(--tch-accent) 70%, #b8743a 30%);
}

/* Soleil couchant : disque doré qui descend doucement à mi-horizon */
.ib-footer__sunset-disc {
    fill: radial-gradient(
        circle,
        #ffd180 0%,
        var(--tch-accent) 60%,
        #c5733a 100%
    );
    fill: #ffc080; /* fallback pour navigateurs qui n'acceptent pas gradient sur fill */
    filter: drop-shadow(
        0 0 30px color-mix(in srgb, var(--tch-accent) 80%, transparent)
    );
    animation: ib-footer-sun-glow 4s ease-in-out infinite;
}

@keyframes ib-footer-sun-glow {
    0%,
    100% {
        opacity: 0.95;
    }
    50% {
        opacity: 1;
    }
}

/* Silhouettes baobab miniatures sur l'horizon */
.ib-footer__baobab-mini {
    fill: color-mix(in srgb, var(--tch-primary) 85%, #000 15%);
    color: color-mix(in srgb, var(--tch-primary) 85%, #000 15%);
}

.ib-footer__baobab-mini--left {
    fill: color-mix(in srgb, var(--tch-primary) 75%, #000 25%);
    opacity: 0.85;
}

/* Deux oiseaux qui rentrent au nid : vol lent en boucle */
.ib-footer__birds {
    color: color-mix(in srgb, var(--tch-primary) 70%, #000 30%);
}

.ib-footer__bird--1 {
    animation: ib-footer-bird-1 12s linear infinite;
}

.ib-footer__bird--2 {
    animation: ib-footer-bird-2 14s linear infinite;
}

@keyframes ib-footer-bird-1 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    50% {
        transform: translate(120px, -10px);
        opacity: 1;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translate(280px, -20px);
        opacity: 0;
    }
}

@keyframes ib-footer-bird-2 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    55% {
        transform: translate(140px, -8px);
        opacity: 1;
    }
    100% {
        transform: translate(300px, -16px);
        opacity: 0;
    }
}

/* Herbes au sol */
.ib-footer__grass {
    fill: color-mix(in srgb, var(--tch-primary) 80%, #000 20%);
}

/* Bandeau de signature : posé SUR le bas du SVG horizon en glassmorphism,
   pour décoller le texte du fond peach/terre cuite et garantir la lecture
   de « POWERED BY ST Lab » quelle que soit la palette du mariage. */
.ib-footer__inner {
    position: relative;
    margin: -36px auto 18px;
    padding: 10px 22px;
    max-width: 360px;
    background: color-mix(in srgb, var(--tch-bg, #FFF7EA) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--tch-accent) 50%, transparent);
    border-radius: 999px;
    box-shadow:
        0 8px 20px -8px color-mix(in srgb, var(--ib-baobab-shadow) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
}

.ib-footer__rule {
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tch-accent) 80%, transparent),
        color-mix(in srgb, var(--tch-accent) 100%, transparent),
        color-mix(in srgb, var(--tch-accent) 80%, transparent),
        transparent
    );
}

.ib-footer__mark {
    color: var(--tch-accent);
    text-shadow: 0 0 8px color-mix(in srgb, var(--tch-accent) 60%, transparent);
}

.ib-footer__credit {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    color: var(--tch-primary);
}

.ib-footer__credit .inv-footer__credit-prefix {
    color: color-mix(in srgb, var(--tch-primary) 75%, transparent);
}

.ib-footer__credit .inv-footer__credit-name {
    color: var(--tch-accent);
    font-weight: 600;
}

.ib-footer__credit .inv-footer__credit-name {
    color: var(--tch-accent);
}

.ib-footer__referral {
    text-align: center;
    color: color-mix(in srgb, var(--tch-primary) 75%, transparent);
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-style: italic;
    padding: 0 6vw 32px;
}

.ib-footer__referral .inv-footer__referral-link {
    color: var(--tch-accent);
    text-decoration: none;
    border-bottom: 1px solid
        color-mix(in srgb, var(--tch-accent) 50%, transparent);
}

.ib-footer__referral .inv-footer__referral-link:hover {
    color: color-mix(in srgb, var(--tch-accent) 75%, var(--tch-primary) 25%);
}

/* Reduced motion : le soleil ne pulse plus, les oiseaux disparaissent */
@media (prefers-reduced-motion: reduce) {
    .ib-footer__sunset-disc,
    .ib-footer__bird--1,
    .ib-footer__bird--2 {
        animation: none !important;
    }
    .ib-footer__bird--1,
    .ib-footer__bird--2 {
        opacity: 0.6;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINITION RESPONSIVE — iPhone SE 375px et touch targets ≥ 48px partout
   Audit complet : on s'assure que toutes les interactions sont confortables
   au pouce sur petits écrans et que le décor ne sature pas la page mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {
    /* iPhone SE : décor ultra-discret pour préserver la lisibilité du texte */
    .ib-decor-baobab {
        width: 62vw;
        opacity: 0.55;
    }
    .ib-decor-sun {
        width: 32vw;
        height: 32vw;
        opacity: 0.7;
    }
    .ib-decor-grasses {
        height: 9vh;
        opacity: 0.6;
    }
    .ib-decor-petals span:nth-child(3n) {
        display: none; /* on cache 2/3 des pétales sur très petit écran */
    }

    /* Touch targets ≥ 48px sur tous les boutons interactifs */
    .ib-rsvp__bird {
        min-height: 56px;
    }

    /* Footer : silhouettes baobab miniatures plus serrées */
    .ib-footer__horizon {
        height: 140px;
    }

    /* Sections : padding allégé pour éviter le scroll horizontal */
    .ib-rsvp {
        padding-left: 4vw;
        padding-right: 4vw;
    }
}

/* Tablette : RSVP en colonne */
@media (min-width: 480px) and (max-width: 767px) {
    .ib-rsvp__responses {
        grid-template-columns: 1fr;
    }
}