/* ═════════════════════════════════════════════════════════════════════════════
   THÈME SABLIER — « L'Or Liquide »
   Direction artistique : verre soufflé doré + sable cristallisé.
   Métaphore centrale : le temps prend forme de matière fluide qui se solidifie
   en ornements précieux. Glassmorphism contemporain + ambre poudreux chaud.
   Champ lexical : flux, goutte, ondes, cristal, miel, ambre, souffle, sablier.

   Identité visuelle invariante (or) + adaptation au mariage (velours scène)
   sur le même pattern que Royal/RSVP : --sb-amber-* hardcodés, fond dérivé
   de var(--tch-primary).
   ═════════════════════════════════════════════════════════════════════════════ */

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

/* ── 1. Variables CSS Sablier — Palette invariante (or signature) ─────────
   L'or est HARDCODÉ pour garantir l'identité Sablier quelle que soit la
   palette du mariage. Le velours/fond dérive de var(--tch-primary) (toujours
   sombre dans la majorité des palettes mariage). Pattern validé sur Royal
   (--pgm-r-gold-*) et la section RSVP « Les Sceaux d'Honneur ». */
.invitation-wrapper,
body.theme-sablier-page {
    /* Or signature — invariant, ne dépend pas du toggle « couleurs du mariage » */
    --sb-amber-deep:   #5C4B36; /* terre cuite profonde — ombres */
    --sb-amber-mid:    #C9A876; /* sable doré — base */
    --sb-amber-light:  #E8D4A2; /* sable clair — reflets */
    --sb-amber-glow:   #FFE9B8; /* lueur ambrée — éclats */
    --sb-cream:        #FAF6EE; /* lin ivoire — fond clair */
    --sb-cream-deep:   #F0E7D2; /* lin sablé — fond mid */

    /* Verre soufflé — surfaces semi-transparentes signatures */
    --sb-glass-bg:     rgba(232, 212, 162, 0.10);
    --sb-glass-bg-strong: rgba(232, 212, 162, 0.18);
    --sb-glass-border: rgba(201, 168, 118, 0.45);
    --sb-glass-shine:  rgba(255, 233, 184, 0.30);

    /* Easings Sablier — fluide comme le verre soufflé */
    --sb-ease-flow:   cubic-bezier(0.22, 1, 0.36, 1);
    --sb-ease-pour:   cubic-bezier(0.65, 0, 0.35, 1);
    --sb-ease-drop:   cubic-bezier(0.4, 0, 0.2, 1.2);
    --sb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typographies thème — display Cormorant italique, corps Inter */
    --sb-font-display: "Cormorant Garamond", "Bodoni Moda", Georgia, serif;
    --sb-font-numeric: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
    --sb-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* SVG stop-color classes — permettent aux gradients SVG d'utiliser l'or
   hardcodé (les attributs stop-color="..." ne consomment pas var()). */
.sb-grad-stop-light { stop-color: #FFE9B8; }
.sb-grad-stop-mid   { stop-color: #C9A876; }
.sb-grad-stop-dark  { stop-color: #5C4B36; }
.sb-grad-stop-glass-top { stop-color: rgba(255, 233, 184, 0.55); }
.sb-grad-stop-glass-bot { stop-color: rgba(201, 168, 118, 0.20); }

/* ── 2. body.theme-sablier-page — fond global ambré + scrollbar ──────────
   Fond chaud dérivé de --tch-primary (mariage) pour garantir la profondeur
   quelle que soit la palette. Patterns radiaux ambrés pour signature visuelle. */
body.theme-sablier-page {
    background:
        radial-gradient(
            ellipse 80% 60% at 20% 10%,
            color-mix(in srgb, #C9A876 14%, transparent) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse 70% 50% at 85% 80%,
            color-mix(in srgb, #5C4B36 25%, transparent) 0%,
            transparent 55%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--tch-primary) 35%, #1a0f06) 0%,
            color-mix(in srgb, var(--tch-primary) 25%, #0d0703) 100%
        );
    background-attachment: fixed;
    color: var(--sb-cream);
}

body.theme-sablier-page ::selection {
    background: rgba(201, 168, 118, 0.45);
    color: #FAF6EE;
}

/* La .invitation-wrapper parent a un fond ivoire (var(--inv-bg) = #FFF7EA)
   qui masque notre gradient sombre posé sur body. Forcer transparent pour
   laisser le fond ambre/velours sortir, et hériter de notre couleur cream. */
body.theme-sablier-page .invitation-wrapper,
body.theme-sablier-page .inv2-wrapper {
    background: transparent;
    color: var(--sb-cream);
}

body.theme-sablier-page::-webkit-scrollbar { width: 10px; }
body.theme-sablier-page::-webkit-scrollbar-track {
    background: color-mix(in srgb, #5C4B36 50%, #000);
}
body.theme-sablier-page::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #C9A876 0%, #5C4B36 100%);
    border-radius: 5px;
}

/* ── 3. Décor ambient — gouttes d'or fixes flottantes ────────────────────
   8 gouttes d'or en arrière-plan absolu, animation float infinie 12-18s.
   Densité : 4 visibles à tout moment, plus 4 en transit. Subtil, ne distrait
   pas mais signe l'identité « matière fluide en suspension ». */
body.theme-sablier-page .sb-decor-droplets {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
body.theme-sablier-page .sb-decor-droplet {
    position: absolute;
    width: 12px;
    height: 18px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    background: radial-gradient(
        ellipse at 35% 30%,
        rgba(255, 233, 184, 0.6) 0%,
        rgba(201, 168, 118, 0.35) 50%,
        rgba(92, 75, 54, 0.2) 100%
    );
    box-shadow:
        inset 0 -2px 3px rgba(255, 233, 184, 0.3),
        0 0 8px rgba(201, 168, 118, 0.25);
    opacity: 0;
    animation: sb-droplet-float 14s ease-in-out infinite;
}
body.theme-sablier-page .sb-decor-droplet:nth-child(1) { left: 8%;  top: 100%; animation-delay: 0s;   animation-duration: 14s; }
body.theme-sablier-page .sb-decor-droplet:nth-child(2) { left: 22%; top: 100%; animation-delay: 2.5s; animation-duration: 17s; transform: scale(0.7); }
body.theme-sablier-page .sb-decor-droplet:nth-child(3) { left: 36%; top: 100%; animation-delay: 5.2s; animation-duration: 13s; transform: scale(1.3); }
body.theme-sablier-page .sb-decor-droplet:nth-child(4) { left: 52%; top: 100%; animation-delay: 1.4s; animation-duration: 16s; }
body.theme-sablier-page .sb-decor-droplet:nth-child(5) { left: 65%; top: 100%; animation-delay: 7.8s; animation-duration: 15s; transform: scale(0.85); }
body.theme-sablier-page .sb-decor-droplet:nth-child(6) { left: 78%; top: 100%; animation-delay: 4.3s; animation-duration: 18s; transform: scale(1.1); }
body.theme-sablier-page .sb-decor-droplet:nth-child(7) { left: 88%; top: 100%; animation-delay: 9.1s; animation-duration: 12s; }
body.theme-sablier-page .sb-decor-droplet:nth-child(8) { left: 95%; top: 100%; animation-delay: 6s;   animation-duration: 16.5s; transform: scale(0.75); }
@keyframes sb-droplet-float {
    0%   { transform: translateY(0) scale(var(--scale, 1));    opacity: 0; }
    10%  { opacity: 0.7; }
    50%  { opacity: 1; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-110vh) scale(var(--scale, 1)); opacity: 0; }
}

/* ── 4. Utilities glassmorphism + ondes liquides ─────────────────────────
   Réutilisables sur toutes les sections (cartes hero, RSVP, programme, etc.). */
.sb-glass {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
            backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--sb-glass-border);
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        inset 0 -1px 0 rgba(92, 75, 54, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.35);
    border-radius: 18px;
}

.sb-glass--soft {
    background: var(--sb-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
            backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid color-mix(in srgb, #C9A876 30%, transparent);
    border-radius: 14px;
}

/* Fallback pour navigateurs sans backdrop-filter (anciens Chrome Android) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sb-glass,
    .sb-glass--soft {
        background: rgba(92, 75, 54, 0.55);
    }
}

/* Texte en or signature avec gradient + glow subtle */
.sb-amber-text {
    background: linear-gradient(
        135deg,
        #FFE9B8 0%,
        #C9A876 50%,
        #5C4B36 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 18px rgba(201, 168, 118, 0.35);
}

/* ═════════════════════════════════════════════════════════════════════════════
   SPLASH SABLIER — « Le Pacte du Temps Suspendu »
   Narration cinématographique en 2 phases pilotées par l'utilisateur
   (pattern Tinhoetina enveloppe : aucune animation chirurgicale ne démarre
   sans interaction). Voir _sablier_splash.html.twig pour le scénario complet.

   PHASE 1 (.sb-splash--idle)     → sablier figé + sceau scellé + bouton CTA
   PHASE 2 (.sb-splash--opening)  → sceau se fend + sable coule + gravures
   PHASE 3 (.sb-splash--discover) → bouton « Passer à l'invitation » émerge
   BRISURE (.sb-splash--breaking) → explosion + fade out
   ═════════════════════════════════════════════════════════════════════════════ */

.sb-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* Grid 2 rangs : stage (1fr centré vertical) + CTA (auto en bas).
       Les portraits sont désormais nestés dans le sablier (cabochons aux
       côtés du col) — ils ne participent plus au layout vertical du splash. */
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    padding: clamp(20px, 4vh, 40px) 24px clamp(20px, 4vh, 40px);
    gap: clamp(14px, 2.5vh, 28px);
    overflow: hidden;
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 50%,
            color-mix(in srgb, #C9A876 14%, transparent) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle at 50% 50%,
            color-mix(in srgb, var(--tch-primary) 55%, #1a0f06) 0%,
            color-mix(in srgb, var(--tch-primary) 25%, #000) 100%
        );
    isolation: isolate;
    opacity: 0;
    animation: sb-splash-enter 0.7s var(--sb-ease-flow) forwards;
}
@keyframes sb-splash-enter { to { opacity: 1; } }

/* Canvas particules dorées en arrière-plan (toutes phases) */
.sb-splash__sand-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: sb-splash-canvas-fade 1.2s ease-out 0.3s forwards;
}
@keyframes sb-splash-canvas-fade { to { opacity: 1; } }

/* ── Stage central — porte le sablier et toutes les gravures ─────────── */
.sb-splash__stage {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    /* Plus de padding interne : la grille du splash (gap + paddings) gère
       l'espacement avec les portraits (au-dessus) et le CTA (en dessous). */
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 1 — IDLE : sablier figé + sceau + eyebrow + CTA
   ──────────────────────────────────────────────────────────────────────── */

/* Portraits du couple — médaillons or au-dessus du sablier (phase 1+).
   2 cercles côte à côte avec cadre or signature, ombre portée et léger
   float vertical infini pour rappeler la « matière en suspension » du
   thème. Présents en idle ET en opening/discover (renforcent l'identité
   tout au long de l'expérience). */
/* Container portraits — couvre le sablier en absolute pour permettre
   aux 2 portraits de se positionner par rapport à ses 4 bords (top/right
   du col, left/right du sablier). Ne s'affiche pas visuellement. */
.sb-splash__portraits {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}
/* Chaque portrait : cabochon rond positionné au niveau du col (top: 50%),
   flanquant le sablier à l'extérieur (groom à gauche, bride à droite).
   Sortent légèrement du cadre du sablier pour créer la silhouette « couple
   qui veille sur le temps ». Animations restent scopées sous --opening. */
.sb-splash__portrait {
    position: absolute;
    top: 50%;
    width: clamp(54px, 13vw, 72px);
    height: clamp(54px, 13vw, 72px);
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #C9A876 0%, #5C4B36 100%);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 233, 184, 0.35),
        inset 0 0 0 2px rgba(92, 75, 54, 0.45);
    opacity: 0;
    transform: translateY(-50%);
}
.sb-splash__portrait--groom {
    right: 100%;
    margin-right: clamp(2px, 1vw, 12px);
}
.sb-splash__portrait--bride {
    left: 100%;
    margin-left: clamp(2px, 1vw, 12px);
}
/* Animation scopée sous --opening : portraits émergent au clic d'ouverture */
.sb-splash--opening .sb-splash__portrait,
.sb-splash--discover .sb-splash__portrait {
    animation:
        sb-splash-portrait-rise 0.9s var(--sb-ease-flow) 0.3s forwards,
        sb-splash-portrait-float 6s ease-in-out infinite 1.2s;
}
.sb-splash--opening .sb-splash__portrait--bride,
.sb-splash--discover .sb-splash__portrait--bride {
    animation-delay: 0.45s, 4.2s; /* déphasé pour float désynchronisé */
}
@keyframes sb-splash-portrait-rise {
    from { opacity: 0; transform: translateY(-50%) scale(0.75); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.sb-splash__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
    position: relative;
}
/* Cadre or signature — un anneau lumineux par-dessus la photo */
.sb-splash__portrait-frame {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    background: linear-gradient(
        135deg,
        #FFE9B8 0%,
        #C9A876 50%,
        #5C4B36 100%
    ) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 2;
    pointer-events: none;
}
@keyframes sb-splash-portrait-float {
    0%, 100% { transform: translateY(-50%); }
    50%      { transform: translateY(calc(-50% - 5px)); }
}
/* Phase 2 + 3 : glow ambré intensifié pour signer la « cristallisation » */
.sb-splash--opening .sb-splash__portrait,
.sb-splash--discover .sb-splash__portrait {
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 233, 184, 0.55),
        0 0 24px rgba(255, 233, 184, 0.25),
        inset 0 0 0 2px rgba(92, 75, 54, 0.45);
    transition: box-shadow 0.8s var(--sb-ease-flow);
}

/* Eyebrow phase 1 : « Le temps s'est arrêté pour vous » */
.sb-splash__eyebrow {
    margin: 0 0 clamp(14px, 2.5vh, 22px) 0;
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in srgb, #FAF6EE 78%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    opacity: 0;
    animation: sb-splash-eyebrow-rise 0.9s var(--sb-ease-flow) 0.6s forwards;
}
.sb-splash__eyebrow-rune {
    font-size: 1rem;
    filter: drop-shadow(0 0 6px rgba(255, 233, 184, 0.6));
}
@keyframes sb-splash-eyebrow-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 0.85; transform: translateY(0); }
}
/* Disparaît à l'ouverture pour laisser place aux noms gravés */
.sb-splash--opening .sb-splash__eyebrow,
.sb-splash--discover .sb-splash__eyebrow {
    animation: sb-splash-fade-out 0.4s ease-out forwards;
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 1 — IDLE : voile narratif, AUCUNE info couple visible
   En phase 1, l'utilisateur ne doit voir que le sablier scellé + l'eyebrow
   métaphorique + le CTA « Briser le sceau du temps ». Tout ce qui révèle
   les informations du mariage (portraits, noms, date, J-X, monogramme,
   sous-titre) reste caché jusqu'au clic d'ouverture. Pattern Tinhoetina :
   l'enveloppe cache son contenu, le sablier scellé cache le sien.
   ──────────────────────────────────────────────────────────────────────── */
.sb-splash__portraits,
.sb-splash__monogram,
.sb-splash__names,
.sb-splash__date,
.sb-splash__countdown,
.sb-splash__contemplate {
    display: none;
}

/* Phase 2 + 3 — restauration du display d'origine quand le sceau est brisé.
   Les animations existantes (cascade lettres, fade-rise, etc.) prennent
   ensuite le relais pour révéler progressivement chaque élément. */
.sb-splash--opening .sb-splash__portraits,
.sb-splash--discover .sb-splash__portraits {
    display: flex;
}
.sb-splash--opening .sb-splash__monogram,
.sb-splash--discover .sb-splash__monogram {
    display: flex;
}
.sb-splash--opening .sb-splash__names,
.sb-splash--discover .sb-splash__names {
    display: flex;
}
.sb-splash--opening .sb-splash__date,
.sb-splash--discover .sb-splash__date {
    display: block;
}
.sb-splash--opening .sb-splash__countdown,
.sb-splash--discover .sb-splash__countdown {
    display: inline-flex;
}
.sb-splash--opening .sb-splash__contemplate,
.sb-splash--discover .sb-splash__contemplate {
    display: block;
}

/* Sablier — visible dès phase 1, sable figé (haut plein, bas vide) */
.sb-splash__hourglass {
    position: relative;
    width: clamp(180px, 50vw, 240px);
    height: clamp(260px, 72vw, 340px);
    opacity: 0;
    transform: scale(0.92);
    animation: sb-splash-hourglass-form 1.4s var(--sb-ease-flow) 0.4s forwards;
    filter: drop-shadow(0 18px 50px rgba(92, 75, 54, 0.65));
}
@keyframes sb-splash-hourglass-form {
    0%   { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}
.sb-splash__hourglass svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Sable phase 1 : haut plein (scaleY=1), bas vide (scaleY=0), pas de filet */
.sb-splash__sand-top {
    transform-origin: center bottom;
    transform: scaleY(1);
}
.sb-splash__sand-bot {
    transform-origin: center top;
    transform: scaleY(0);
}
.sb-splash__sand-stream {
    opacity: 0;
}

/* Sceau d'or au col du sablier — 2 moitiés clip-pathées (phase 1 visible).
   Centré sur le col grâce au parent .sb-splash__hourglass (50% du SVG = col).
   Taille renforcée pour qu'il « ferme » visuellement le sablier sans hésitation,
   double ombre portée pour décoller du verre et signer la matérialité du sceau. */
.sb-splash__seal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(95px, 22vw, 120px);
    height: clamp(95px, 22vw, 120px);
    margin-top: calc(clamp(95px, 22vw, 120px) / -2);
    margin-left: calc(clamp(95px, 22vw, 120px) / -2);
    z-index: 6;
    pointer-events: none;
    filter:
        drop-shadow(0 8px 18px rgba(92, 75, 54, 0.70))
        drop-shadow(0 0 14px rgba(255, 233, 184, 0.35));
    opacity: 0;
    animation: sb-splash-seal-form 1s var(--sb-ease-flow) 1.2s forwards;
}
@keyframes sb-splash-seal-form {
    from { opacity: 0; transform: scale(0.4) rotate(-30deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}
.sb-splash__seal-half {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s ease-out;
}
/* Phase 2 : les 2 moitiés s'écartent et s'évaporent (T+0.2s à T+1.0s) */
.sb-splash--opening .sb-splash__seal-half--left {
    animation: sb-splash-seal-crack-left 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}
.sb-splash--opening .sb-splash__seal-half--right {
    animation: sb-splash-seal-crack-right 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}
@keyframes sb-splash-seal-crack-left {
    0%   { transform: translateX(0) rotate(0); opacity: 1; }
    40%  { transform: translateX(-30px) rotate(-15deg); opacity: 1; }
    100% { transform: translateX(-120px) translateY(40px) rotate(-45deg); opacity: 0; }
}
@keyframes sb-splash-seal-crack-right {
    0%   { transform: translateX(0) rotate(0); opacity: 1; }
    40%  { transform: translateX(30px) rotate(15deg); opacity: 1; }
    100% { transform: translateX(120px) translateY(40px) rotate(45deg); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 2 — OPENING : ondes, sable qui coule, gravures cristallines
   Toutes les animations sont scopées sous .sb-splash--opening pour ne
   démarrer qu'au clic utilisateur (pattern Tinhoetina).
   ──────────────────────────────────────────────────────────────────────── */

/* Ondes concentriques émanant du col (T+0.6s, T+0.9s) */
.sb-splash__impact-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    margin-top: -80px;
    border-radius: 50%;
    border: 2px solid #C9A876;
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
    z-index: 4;
}
.sb-splash--opening .sb-splash__impact-wave--1 {
    animation: sb-splash-wave 1.6s ease-out 0.6s forwards;
}
.sb-splash--opening .sb-splash__impact-wave--2 {
    animation: sb-splash-wave 1.6s ease-out 0.9s forwards;
    border-color: #FFE9B8;
}
@keyframes sb-splash-wave {
    0%   { opacity: 0.9; transform: scale(0.3); }
    100% { opacity: 0;   transform: scale(3.2); }
}

/* Sable phase 2 : le haut se vide (T+0.8s), le bas se remplit (T+0.8s).
   Durée 12s (la moitié des ~5s de contemplation laisse voir un cycle visible,
   sans dramatiser). En phase discover, on fige à l'état final (cf. règles
   suivantes) pour éviter la boucle « le sable remonte ». */
.sb-splash--opening .sb-splash__sand-top {
    animation: sb-splash-sand-empty 12s linear 0.8s infinite;
}
.sb-splash--opening .sb-splash__sand-bot {
    animation: sb-splash-sand-fill 12s linear 0.8s infinite;
}
.sb-splash--opening .sb-splash__sand-stream {
    animation: sb-splash-stream-fade 12s linear 0.8s infinite;
}
@keyframes sb-splash-sand-empty {
    0%   { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}
@keyframes sb-splash-sand-fill {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}
@keyframes sb-splash-stream-fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Phase 3 — sable figé à l'état final pour cohérence narrative.
   Le splash garde les deux classes (--opening + --discover) en phase 3 ;
   ces règles, postérieures dans la cascade et de même spécificité que les
   --opening ci-dessus, l'emportent. La transition vers ces états figés se
   fait sans animation : on stoppe simplement les keyframes en boucle. */
.sb-splash--discover .sb-splash__sand-top {
    animation: none;
    transform: scaleY(0);
    transition: transform 0.6s var(--sb-ease-pour);
}
.sb-splash--discover .sb-splash__sand-bot {
    animation: none;
    transform: scaleY(1);
    transition: transform 0.6s var(--sb-ease-pour);
}
.sb-splash--discover .sb-splash__sand-stream {
    animation: none;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Monogramme au col (T+3.8s : cristallisation au centre du verre).
   Centré sur le col du sablier grâce au parent .sb-splash__hourglass.
   Tailles renforcées + halo de fond opaque (::before) pour le détacher
   du filet de sable qui traverse le col en arrière-plan. */
.sb-splash__monogram {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 7;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 18px;
    font-family: var(--sb-font-display);
    font-style: italic;
    pointer-events: none;
    opacity: 0;
}
/* Halo elliptique de fond — masque le filet de sable derrière le monogramme,
   profite du velours mariage pour rester invisible sur le décor global. */
.sb-splash__monogram::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 90%, #000) 0%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, #000 40%) 55%,
        transparent 80%
    );
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}
.sb-splash__monogram-initial {
    font-size: clamp(2.6rem, 7vw, 3.4rem);
    font-weight: 500;
    line-height: 1;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 50%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 14px rgba(201, 168, 118, 0.55);
}
.sb-splash__monogram-amp {
    font-size: clamp(2rem, 5.5vw, 2.5rem);
    color: #FFE9B8;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 233, 184, 0.7);
}
.sb-splash--opening .sb-splash__monogram,
.sb-splash--discover .sb-splash__monogram {
    animation: sb-splash-monogram-fade 0.9s var(--sb-ease-flow) 3.8s forwards;
}
@keyframes sb-splash-monogram-fade {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Noms gravés lettre par lettre (T+2.2s) — au-dessus du sablier */
.sb-splash__names {
    margin: clamp(18px, 3vh, 30px) 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(1.4rem, 4.5vw, 1.9rem);
    font-weight: 500;
    text-align: center;
    color: #FAF6EE;
    text-shadow: 0 0 14px rgba(201, 168, 118, 0.4);
    pointer-events: none;
}
.sb-splash__names-line {
    display: inline-flex;
    align-items: baseline;
}
.sb-splash__names-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(-12px) scale(0.85);
    color: transparent;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 60%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sb-splash__names-amp {
    color: #FFE9B8;
    font-size: 0.78em;
    opacity: 0;
    transform: scale(0.8);
}
.sb-splash--opening .sb-splash__names-letter,
.sb-splash--discover .sb-splash__names-letter {
    animation: sb-splash-letter-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.sb-splash--opening .sb-splash__names-amp,
.sb-splash--discover .sb-splash__names-amp {
    animation: sb-splash-amp-fade 0.6s var(--sb-ease-flow) 2.7s forwards;
}
@keyframes sb-splash-letter-drop {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sb-splash-amp-fade {
    to { opacity: 0.95; transform: scale(1); }
}
/* Cascade lettres : T+2.2s, +0.06s par lettre (jusqu'à ~16 lettres totales) */
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(1)  { animation-delay: 2.20s; }
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(2)  { animation-delay: 2.26s; }
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(3)  { animation-delay: 2.32s; }
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(4)  { animation-delay: 2.38s; }
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(5)  { animation-delay: 2.44s; }
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(6)  { animation-delay: 2.50s; }
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(7)  { animation-delay: 2.56s; }
.sb-splash--opening .sb-splash__names-line:first-of-type .sb-splash__names-letter:nth-child(8)  { animation-delay: 2.62s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(1)  { animation-delay: 2.80s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(2)  { animation-delay: 2.86s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(3)  { animation-delay: 2.92s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(4)  { animation-delay: 2.98s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(5)  { animation-delay: 3.04s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(6)  { animation-delay: 3.10s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(7)  { animation-delay: 3.16s; }
.sb-splash--opening .sb-splash__names-line:last-of-type  .sb-splash__names-letter:nth-child(8)  { animation-delay: 3.22s; }
/* En phase discover, plus de cascade — toutes visibles instantanément */
.sb-splash--discover .sb-splash__names-letter,
.sb-splash--discover .sb-splash__names-amp {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Date massive (T+3.0s) */
.sb-splash__date {
    margin: clamp(10px, 1.8vh, 18px) 0 0 0;
    font-family: var(--sb-font-numeric);
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.15rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 50%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(201, 168, 118, 0.3);
    opacity: 0;
    text-align: center;
}
.sb-splash--opening .sb-splash__date,
.sb-splash--discover .sb-splash__date {
    animation: sb-splash-fade-rise 0.9s var(--sb-ease-flow) 3.6s forwards;
}
@keyframes sb-splash-fade-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Compte à rebours discret (T+4.4s) */
.sb-splash__countdown {
    margin: clamp(12px, 2vh, 20px) 0 0 0;
    font-family: var(--sb-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, #FAF6EE 75%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-align: center;
    opacity: 0;
}
.sb-splash__countdown-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C9A876;
    box-shadow: 0 0 10px rgba(201, 168, 118, 0.7);
    animation: sb-splash-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes sb-splash-pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.5; }
}
.sb-splash--opening .sb-splash__countdown,
.sb-splash--discover .sb-splash__countdown {
    animation: sb-splash-fade-rise 0.8s var(--sb-ease-flow) 5.2s forwards;
}

/* Sous-titre contemplation (T+4.8s) */
.sb-splash__contemplate {
    margin: clamp(14px, 2.2vh, 22px) 0 0 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: color-mix(in srgb, #FAF6EE 65%, transparent);
    text-align: center;
    opacity: 0;
}
.sb-splash--opening .sb-splash__contemplate,
.sb-splash--discover .sb-splash__contemplate {
    animation: sb-splash-fade-rise 0.8s var(--sb-ease-flow) 6.8s forwards,
               sb-splash-breathe 3s ease-in-out infinite 7.6s;
}
@keyframes sb-splash-breathe {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

/* En phase discover (rejoint après reload tardif), tout est visible */
.sb-splash--discover .sb-splash__date,
.sb-splash--discover .sb-splash__countdown,
.sb-splash--discover .sb-splash__contemplate {
    animation-delay: 0s !important;
}

/* Fade-out utilitaire (eyebrow phase 1 quand on bascule en phase 2) */
@keyframes sb-splash-fade-out {
    to { opacity: 0; visibility: hidden; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CTA POLYMORPHE — porte les 2 labels selon la phase
   Phase 1 (idle)     : « Briser le sceau du temps » — visible
   Phase 2 (opening)  : masqué pendant les 5s d'animation chirurgicale
   Phase 3 (discover) : « Passer à l'invitation » — réémerge avec lueur dorée
   ──────────────────────────────────────────────────────────────────────── */
.sb-splash__cta {
    /* Grid row 3 du splash — pas d'absolute, justify-items: center du
       parent centre horizontalement. Évite le chevauchement avec les
       éléments du stage (noms gravés, date, countdown, contemplate). */
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: linear-gradient(
        135deg,
        var(--tch-primary, #1E2A5A) 0%,
        color-mix(in srgb, var(--tch-primary, #1E2A5A) 75%, #000) 100%
    );
    color: #FFF;
    border: 1px solid color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, #000);
    border-radius: 999px;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px -4px color-mix(in srgb, var(--tch-primary, #1E2A5A) 60%, transparent),
        0 14px 32px -10px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(0);
    animation: sb-splash-cta-rise 0.9s var(--sb-ease-flow) 1.6s forwards;
    transition: transform 0.3s var(--sb-ease-spring),
                box-shadow 0.3s ease,
                opacity 0.4s ease;
    -webkit-tap-highlight-color: transparent;
}
@keyframes sb-splash-cta-rise {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.sb-splash__cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 6px 14px -4px color-mix(in srgb, var(--tch-primary, #1E2A5A) 70%, transparent),
        0 20px 44px -10px rgba(0, 0, 0, 0.6);
}
.sb-splash__cta:focus-visible {
    outline: 2px solid #FFE9B8;
    outline-offset: 3px;
}

/* Deux labels coexistent en DOM, un seul visible selon l'état */
.sb-splash__cta-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.sb-splash__cta-content--discover { display: none; }
.sb-splash--discover .sb-splash__cta-content--open { display: none; }
.sb-splash--discover .sb-splash__cta-content--discover {
    display: inline-flex;
    animation: sb-splash-fade-in 0.5s ease-out forwards;
}
@keyframes sb-splash-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Phase 2 (opening) : CTA masqué pour laisser contempler la chorégraphie */
.sb-splash--opening:not(.sb-splash--discover) .sb-splash__cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    animation: none;
}
/* Phase 3 (discover) : CTA réémerge avec sa propre montée */
.sb-splash--discover .sb-splash__cta {
    animation: sb-splash-cta-rise 0.9s var(--sb-ease-flow) forwards;
}

.sb-splash__cta-icon,
.sb-splash__cta-arrow {
    display: inline-flex;
    align-items: center;
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--sb-ease-spring);
}
.sb-splash__cta-icon svg,
.sb-splash__cta-arrow svg {
    width: 100%;
    height: 100%;
}
.sb-splash__cta:hover .sb-splash__cta-icon {
    animation: sb-splash-seal-shake 0.8s ease-in-out infinite;
}
@keyframes sb-splash-seal-shake {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-12deg); }
    75%      { transform: rotate(12deg); }
}
.sb-splash--discover .sb-splash__cta:hover .sb-splash__cta-arrow {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   BRISURE — au clic sur « Passer à l'invitation », explosion + fade out
   ──────────────────────────────────────────────────────────────────────── */
.sb-splash.sb-splash--breaking {
    pointer-events: none;
}
.sb-splash--breaking .sb-splash__hourglass {
    animation: sb-splash-hourglass-burst 0.95s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes sb-splash-hourglass-burst {
    0%   { transform: scale(1) rotate(0); opacity: 1;
           filter: drop-shadow(0 18px 50px rgba(92, 75, 54, 0.65)); }
    25%  { transform: scale(0.88) rotate(-2deg); opacity: 1; }
    100% { transform: scale(3.6) rotate(8deg); opacity: 0;
           filter: drop-shadow(0 0 80px #FFE9B8) blur(2px); }
}
.sb-splash--breaking .sb-splash__monogram {
    animation: sb-splash-monogram-rise 0.7s ease-out forwards;
}
@keyframes sb-splash-monogram-rise {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -150%) scale(1.6); opacity: 0; }
}
.sb-splash--breaking .sb-splash__cta,
.sb-splash--breaking .sb-splash__names,
.sb-splash--breaking .sb-splash__date,
.sb-splash--breaking .sb-splash__countdown,
.sb-splash--breaking .sb-splash__contemplate,
.sb-splash--breaking .sb-splash__portraits {
    opacity: 0;
    transition: opacity 0.3s;
}
.sb-splash--breaking {
    animation: sb-splash-fade 0.7s var(--sb-ease-flow) 0.5s forwards;
}
@keyframes sb-splash-fade {
    to { opacity: 0; visibility: hidden; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE — Densification < 380px (iPhone SE etc.)
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
    .sb-splash__hourglass {
        width: 170px;
        height: 240px;
    }
    .sb-splash__monogram-initial { font-size: 2rem; }
    .sb-splash__monogram-amp { font-size: 1.5rem; }
    .sb-splash__names { font-size: 1.3rem; gap: 8px; }
    .sb-splash__eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; gap: 8px; }
    .sb-splash__countdown { font-size: 0.75rem; }
    .sb-splash__seal { width: 88px; height: 88px; margin-top: -44px; margin-left: -44px; }
    .sb-splash__portrait { width: 56px; height: 56px; }
    .sb-splash__portrait--groom { margin-right: 6px; }
    .sb-splash__portrait--bride { margin-left: 6px; }
    .sb-splash__cta { padding: 13px 26px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ACCESSIBILITÉ — prefers-reduced-motion : tout statique, contenu final visible
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sb-splash,
    .sb-splash__sand-canvas,
    .sb-splash__impact-wave,
    .sb-splash__hourglass,
    .sb-splash__sand-top,
    .sb-splash__sand-bot,
    .sb-splash__sand-stream,
    .sb-splash__monogram,
    .sb-splash__names,
    .sb-splash__names-letter,
    .sb-splash__names-amp,
    .sb-splash__date,
    .sb-splash__countdown,
    .sb-splash__contemplate,
    .sb-splash__eyebrow,
    .sb-splash__portraits,
    .sb-splash__portrait,
    .sb-splash__seal,
    .sb-splash__seal-half,
    .sb-splash__cta,
    body.theme-sablier-page .sb-decor-droplet {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
    .sb-splash__impact-wave { opacity: 0 !important; }
    .sb-splash__hourglass { transform: scale(1) !important; }
    .sb-splash__sand-top { transform: scaleY(0.4) !important; }
    .sb-splash__sand-bot { transform: scaleY(0.6) !important; }
    .sb-splash__monogram { transform: translate(-50%, -50%) !important; }
    .sb-splash__names-letter { transform: none !important; }
    .sb-splash__cta { transform: none !important; }
    /* Portraits : conserver le centrage vertical sur le col, même en
       reduced-motion (animation off mais position correcte). */
    .sb-splash__portrait { transform: translateY(-50%) !important; }
    /* En reduced-motion, la phase 1 expose déjà sceau + sablier + CTA — le
       clic bascule sans chorégraphie via le JS qui retire .--idle. */
    .sb-splash--opening .sb-splash__seal { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 2 — HERO « LE SABLIER GÉANT »
   Sablier en verre soufflé glassmorphism plein écran, noms gravés dans le
   verre des compartiments (groom haut, bride bas), ampersand au col, date
   massive Bodoni Moda en or, sable doré qui coule en continu.

   Override complet du hero parent (.inv-hero / .inv2-hero) — pas de bg image,
   le sablier EST le hero. Métaphore : « vous êtes contenus dans cet instant ».
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .sb-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(48px, 8vh, 80px) clamp(16px, 4vw, 40px);
    overflow: hidden;
    isolation: isolate;
}

/* Photo couple en background — couvre toute la section, overlay sombre
   + teinte ambre + vignette pour préserver la lisibilité du sablier et
   des textes par-dessus tout en gardant l'identité Sablier (chaleur or). */
body.theme-sablier-page .sb-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
body.theme-sablier-page .sb-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Légère désaturation + chaleur pour fondre la photo dans l'ambre */
    filter: saturate(0.85) brightness(0.65) sepia(0.18);
    animation: sb-hero-bg-kenburns 22s ease-in-out infinite alternate;
}
@keyframes sb-hero-bg-kenburns {
    0%   { transform: scale(1.08) translate(0, 0); }
    100% { transform: scale(1.15) translate(-1.5%, -1%); }
}
/* Overlay multi-couche : gradient vertical sombre + tint ambre radial.
   Conserve le sablier visible au centre, assombrit haut/bas pour la
   lecture des textes (eyebrow + date/ville/welcome/CTA). */
body.theme-sablier-page .sb-hero__bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 50%,
            color-mix(in srgb, #5C4B36 35%, transparent) 0%,
            color-mix(in srgb, #5C4B36 75%, transparent) 70%,
            color-mix(in srgb, #2a1f15 92%, transparent) 100%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--tch-primary) 60%, #000) 0%,
            color-mix(in srgb, #5C4B36 40%, transparent) 30%,
            color-mix(in srgb, #5C4B36 30%, transparent) 70%,
            color-mix(in srgb, var(--tch-primary) 65%, #000) 100%
        );
    mix-blend-mode: multiply;
}
/* Vignette douce sur les bords pour cadrer le regard */
body.theme-sablier-page .sb-hero__bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 100% 100% at 50% 50%,
        transparent 50%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

/* Quand le hero a une bg photo, l'ambient pulse devient plus discret
   (le travail d'atmosphère est déjà fait par la photo + overlay). */
body.theme-sablier-page .sb-hero--with-bg .sb-hero__ambient {
    opacity: 0.5;
    mix-blend-mode: screen;
}

/* Halo ambient — radial glow ambré derrière le sablier */
body.theme-sablier-page .sb-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 60% 50% at 50% 50%,
            color-mix(in srgb, #C9A876 18%, transparent) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 90% 35% at 50% 110%,
            color-mix(in srgb, #5C4B36 40%, transparent) 0%,
            transparent 70%
        );
    animation: sb-hero-ambient-pulse 9s ease-in-out infinite;
}
@keyframes sb-hero-ambient-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

.sb-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 2vh, 20px);
    max-width: 560px;
    text-align: center;
}

/* Greeting personnel — Cormorant italique #FAF6EE */
.sb-hero__greeting {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    color: color-mix(in srgb, #FAF6EE 90%, transparent);
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
.sb-hero__greeting strong {
    color: #FFE9B8;
    font-weight: 600;
    font-style: italic;
}

/* Eyebrow signature — fil d'or fin + texte centré */
.sb-hero__eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #C9A876;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7), 0 0 12px rgba(201, 168, 118, 0.35);
}
.sb-hero__eyebrow-line {
    display: inline-block;
    width: clamp(28px, 8vw, 56px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #C9A876 50%,
        transparent 100%
    );
}

/* Le sablier géant — centerpiece du hero */
.sb-hero__sablier {
    position: relative;
    width: clamp(180px, 42vw, 250px);
    height: auto;
    aspect-ratio: 240 / 340;
    margin: clamp(4px, 1vh, 10px) 0;
    -webkit-filter:
        drop-shadow(0 25px 60px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 40px rgba(255, 233, 184, 0.28));
            filter:
        drop-shadow(0 25px 60px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 40px rgba(255, 233, 184, 0.28));
    animation: sb-hero-breathe 4.5s ease-in-out infinite;
}
@keyframes sb-hero-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.018); }
}
.sb-hero__sablier-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Filet de sable doré en continu — stroke-dasharray fluide */
.sb-hero__sand-stream {
    stroke-dasharray: 2 6;
    animation: sb-hero-sand-flow 1.2s linear infinite;
}
@keyframes sb-hero-sand-flow {
    to { stroke-dashoffset: -16; }
}

/* Noms gravés dans le verre — couleur unie or vif pour rester lisibles sur
   le verre soufflé clair des compartiments (qui est rgba(255, 233, 184, 0.55)
   et avalerait un gradient texte). Halo or chaud + ombre brune contrastante
   pour donner l'effet « gravé dans le verre ». */
.sb-hero__name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.15rem, 4.8vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 60%;
    color: #FFE9B8;
    text-shadow:
        0 1px 0 rgba(92, 75, 54, 0.55),
        0 2px 4px rgba(92, 75, 54, 0.75),
        0 0 14px rgba(255, 233, 184, 0.7),
        0 0 24px rgba(201, 168, 118, 0.45);
    pointer-events: none;
}
.sb-hero__name--top {
    top: 27%;
}
.sb-hero__name--bot {
    top: 67%;
}

/* Ampersand au col du sablier — point de jonction */
.sb-hero__amp {
    position: absolute;
    top: 49.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    color: #FFE9B8;
    text-shadow:
        0 0 8px rgba(255, 233, 184, 0.9),
        0 0 16px rgba(201, 168, 118, 0.6);
    pointer-events: none;
    animation: sb-hero-amp-glow 2.4s ease-in-out infinite;
}
@keyframes sb-hero-amp-glow {
    0%, 100% { opacity: 0.85; text-shadow: 0 0 8px rgba(255, 233, 184, 0.9), 0 0 16px rgba(201, 168, 118, 0.6); }
    50%      { opacity: 1;    text-shadow: 0 0 12px rgba(255, 233, 184, 1),   0 0 24px rgba(201, 168, 118, 0.85); }
}

/* Noms mobile (fallback) — masqués desktop, visibles si écran trop étroit */
.sb-hero__names-mobile {
    display: none;
}

/* Date massive — typo Bodoni avec séparateurs losanges or */
.sb-hero__date {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(8px, 2vw, 16px);
    font-family: var(--sb-font-numeric);
    font-size: clamp(1.3rem, 4.5vw, 1.85rem);
    font-weight: 500;
    color: #FFE9B8;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 18px rgba(201, 168, 118, 0.3);
}
.sb-hero__date-day,
.sb-hero__date-year {
    color: #FFE9B8;
    font-weight: 500;
}
.sb-hero__date-month {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in srgb, #FFE9B8 85%, transparent);
    text-transform: lowercase;
}
.sb-hero__date-sep {
    color: #C9A876;
    font-size: 0.7em;
    transform: translateY(-0.15em);
    opacity: 0.75;
}

/* Ville sous la date */
.sb-hero__city {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(1rem, 2.6vw, 1.25rem);
    color: #FAF6EE;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Welcome message — Cormorant italique discret */
.sb-hero__welcome {
    margin: 0;
    max-width: 480px;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 1.6;
    color: color-mix(in srgb, #FAF6EE 92%, transparent);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* CTA — verre soufflé avec liseré or, hover : se remplit */
.sb-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    margin-top: clamp(8px, 2vh, 16px);
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FFE9B8;
    text-decoration: none;
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
            backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--sb-glass-border);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 10px 28px rgba(0, 0, 0, 0.3);
    transition: all 0.35s var(--sb-ease-flow);
    cursor: pointer;
}
.sb-hero__cta:hover,
.sb-hero__cta:focus-visible {
    color: #5C4B36;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    border-color: #FFE9B8;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 16px 36px rgba(201, 168, 118, 0.55),
        0 0 20px rgba(255, 233, 184, 0.4);
    outline: none;
}
.sb-hero__cta-icon {
    display: inline-flex;
    animation: sb-hero-cta-bounce 2s ease-in-out infinite;
}
@keyframes sb-hero-cta-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* Mobile portrait — noms hors du sablier (les triangles intérieurs sont trop étroits) */
@media (max-width: 420px) {
    .sb-hero__name,
    .sb-hero__amp {
        display: none;
    }
    .sb-hero__names-mobile {
        display: inline-flex;
        align-items: baseline;
        gap: 10px;
        font-family: var(--sb-font-display);
        font-style: italic;
        font-size: 1.55rem;
        font-weight: 600;
        color: #FFE9B8;
        text-shadow:
            0 1px 0 rgba(92, 75, 54, 0.55),
            0 2px 4px rgba(92, 75, 54, 0.7),
            0 0 14px rgba(255, 233, 184, 0.65);
    }
    .sb-hero__names-mobile-amp {
        color: #C9A876;
        font-size: 1.2rem;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 2 — VERSE « LE PHYLACTÈRE D'AMBRE »
   Citation enveloppée dans une bulle de verre soufflé organique (border-radius
   asymétrique imitant une goutte de miel figée). Symbole du livre flotte au-
   dessus, source gravée en relief en-dessous. Halo radial ambré derrière.

   Override complet du verse parent (.inv2-verse) — sans typewriter, le texte
   est visible d'emblée pour respecter la sacralité de la citation.
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .sb-verse {
    position: relative;
    padding: clamp(48px, 7vh, 84px) clamp(20px, 6vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    isolation: isolate;
}

/* Halo ambré derrière — large gradient radial */
.sb-verse__halo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 70% at 50% 50%,
        color-mix(in srgb, #C9A876 14%, transparent) 0%,
        transparent 60%
    );
    animation: sb-verse-halo-breathe 6s ease-in-out infinite;
}
@keyframes sb-verse-halo-breathe {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Symbole du livre — en haut, encerclé d'or */
.sb-verse__symbol {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin-bottom: clamp(20px, 3vh, 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--sb-glass-border);
    border-radius: 50%;
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
            backdrop-filter: blur(14px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 8px 22px rgba(0, 0, 0, 0.3);
}
.sb-verse__symbol-inner {
    font-size: 1.6rem;
    line-height: 1;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Phylactère — bulle organique en verre soufflé doré */
.sb-verse__phylactere {
    position: relative;
    z-index: 1;
    max-width: 620px;
    width: 100%;
    padding: clamp(36px, 6vw, 56px) clamp(28px, 5vw, 48px);
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
            backdrop-filter: blur(24px) saturate(1.5);
    border: 1.5px solid var(--sb-glass-border);
    /* Forme organique asymétrique — goutte d'ambre figée */
    border-radius: 42% 58% 48% 52% / 60% 50% 50% 40%;
    box-shadow:
        inset 0 2px 0 var(--sb-glass-shine),
        inset 0 -2px 0 rgba(92, 75, 54, 0.3),
        0 24px 60px rgba(0, 0, 0, 0.35),
        0 0 60px rgba(201, 168, 118, 0.2);
    overflow: hidden;
    /* Animation « respiration » subtile */
    animation: sb-verse-breathe 4s ease-in-out infinite;
}
@keyframes sb-verse-breathe {
    0%, 100% {
        transform: scale(1);
        border-radius: 42% 58% 48% 52% / 60% 50% 50% 40%;
    }
    50% {
        transform: scale(1.012);
        border-radius: 50% 50% 52% 48% / 52% 58% 42% 50%;
    }
}

/* Reflets brillants — 2 ovales lumineux qui parcourent la bulle */
.sb-verse__shine {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 30% 30%,
        rgba(255, 233, 184, 0.5) 0%,
        rgba(255, 233, 184, 0.15) 40%,
        transparent 70%
    );
    filter: blur(8px);
}
.sb-verse__shine--top {
    top: -10%;
    left: 12%;
    width: 35%;
    height: 35%;
    opacity: 0.7;
}
.sb-verse__shine--bot {
    bottom: -8%;
    right: 14%;
    width: 28%;
    height: 28%;
    opacity: 0.45;
}

/* Texte de la citation — Cormorant italique large */
.sb-verse__text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 3vw, 1.55rem);
    line-height: 1.55;
    color: #FAF6EE;
    quotes: "« " " »";
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}
.sb-verse__text::before { content: open-quote;  color: #FFE9B8; margin-right: 0.15em; }
.sb-verse__text::after  { content: close-quote; color: #FFE9B8; margin-left: 0.15em; }

/* Source — gravée sous le phylactère, séparateurs or */
.sb-verse__source-block {
    position: relative;
    z-index: 1;
    margin-top: clamp(24px, 4vh, 36px);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 90%;
}
.sb-verse__source-line {
    flex: 0 0 auto;
    width: clamp(24px, 6vw, 48px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #C9A876 50%,
        transparent 100%
    );
}
.sb-verse__source {
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #C9A876;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(201, 168, 118, 0.4);
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 2 — LE DUO « LES MÉDAILLONS LIQUIDES »
   Direction artistique propre à cette section — aucun sablier, métaphore
   distincte : deux portraits enfermés dans des blobs d'ambre en perpétuelle
   morphologie organique, reliés par un ruban d'or serpentin qui se trace
   au scroll, esperluette calligraphique géante au centre dans un éclair.
   Métaphore : « deux gouttes de miel figées dans le même rayon de soleil ».

   Stack des animations dopaminergiques :
     1. Blob border-radius morphing 12s ease-in-out (jamais répétitif)
     2. Inner glow ambré qui respire 5s en counter-phase
     3. Reflet doré qui traverse en diagonale 7s
     4. Halo radial extérieur qui pulse 6s
     5. Ruban d'or stroke-dasharray draw au reveal (1.8s)
     6. Esperluette scale+rotate+burst à l'apparition (0.9s)
     7. Particules dorées qui flottent autour (12 grains, durées variées)
     8. Hover desktop : tilt 3D + parallax photo + intensification glow

   Layout : grid 1fr / auto / 1fr desktop → colonne mobile (ruban devient
   vertical via swap des deux SVG par CSS).
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .sb-duo {
    position: relative;
    padding: clamp(48px, 7vh, 84px) clamp(16px, 4vw, 40px);
    isolation: isolate;
    overflow: hidden;
}

/* ── Ambient — halo central + 12 particules dorées qui flottent ──────── */
.sb-duo__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.sb-duo__halo-core,
.sb-duo__halo-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}
.sb-duo__halo-core {
    width: clamp(280px, 50vw, 520px);
    height: clamp(280px, 50vw, 520px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, #C9A876 22%, transparent) 0%,
        color-mix(in srgb, #5C4B36 18%, transparent) 50%,
        transparent 80%
    );
    animation: sb-duo-halo-pulse 7s ease-in-out infinite;
}
.sb-duo__halo-aura {
    width: clamp(420px, 80vw, 800px);
    height: clamp(420px, 80vw, 800px);
    background: radial-gradient(
        circle,
        color-mix(in srgb, #5C4B36 25%, transparent) 0%,
        transparent 70%
    );
    animation: sb-duo-halo-pulse 11s ease-in-out infinite reverse;
}
@keyframes sb-duo-halo-pulse {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}
.sb-duo__particle {
    position: absolute;
    width: 5px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 30% 30%, #FFE9B8 0%, #C9A876 65%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 233, 184, 0.6);
    opacity: 0;
    animation: sb-duo-particle-float 16s ease-in-out infinite;
}
.sb-duo__particle:nth-child(3)  { left: 5%;  top: 100%; animation-delay: 0s;    animation-duration: 15s; }
.sb-duo__particle:nth-child(4)  { left: 12%; top: 100%; animation-delay: 2.1s;  animation-duration: 18s; transform: scale(0.7); }
.sb-duo__particle:nth-child(5)  { left: 22%; top: 100%; animation-delay: 4.5s;  animation-duration: 13s; transform: scale(1.3); }
.sb-duo__particle:nth-child(6)  { left: 32%; top: 100%; animation-delay: 6.8s;  animation-duration: 16s; }
.sb-duo__particle:nth-child(7)  { left: 42%; top: 100%; animation-delay: 1.4s;  animation-duration: 14s; transform: scale(0.85); }
.sb-duo__particle:nth-child(8)  { left: 58%; top: 100%; animation-delay: 9.2s;  animation-duration: 17s; }
.sb-duo__particle:nth-child(9)  { left: 68%; top: 100%; animation-delay: 11.5s; animation-duration: 15s; transform: scale(1.1); }
.sb-duo__particle:nth-child(10) { left: 78%; top: 100%; animation-delay: 3.8s;  animation-duration: 16.5s; }
.sb-duo__particle:nth-child(11) { left: 86%; top: 100%; animation-delay: 7.1s;  animation-duration: 13.5s; transform: scale(0.75); }
.sb-duo__particle:nth-child(12) { left: 92%; top: 100%; animation-delay: 5.3s;  animation-duration: 17.5s; }
.sb-duo__particle:nth-child(13) { left: 96%; top: 100%; animation-delay: 10.4s; animation-duration: 12.5s; transform: scale(1.2); }
.sb-duo__particle:nth-child(14) { left: 75%; top: 100%; animation-delay: 13.8s; animation-duration: 14.5s; }
@keyframes sb-duo-particle-float {
    0%   { transform: translateY(0)     scale(var(--scale, 1)); opacity: 0; }
    10%  { opacity: 0.7; }
    50%  { opacity: 1; }
    90%  { opacity: 0.45; }
    100% { transform: translateY(-110vh) scale(var(--scale, 1)); opacity: 0; }
}

/* ── Header éditorial ─────────────────────────────────────────────────── */
.sb-duo__header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    max-width: 620px;
    margin: 0 auto clamp(48px, 8vh, 80px);
}
.sb-duo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #C9A876;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.sb-duo__eyebrow-line {
    display: inline-block;
    width: clamp(28px, 8vw, 56px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A876 50%, transparent 100%);
}
.sb-duo__title {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #FFE9B8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 18px rgba(201, 168, 118, 0.35);
}
.sb-duo__title em {
    font-style: italic;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 60%, #FFE9B8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Animation gradient shift pour rappel cinétique du « rayon » */
    background-size: 200% 200%;
    animation: sb-duo-title-shimmer 6s ease-in-out infinite;
}
@keyframes sb-duo-title-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ── Diptyque grid : 1fr / auto / 1fr (desktop) → 1fr (mobile) ─────── */
.sb-duo__pair {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    max-width: 1040px;
    margin: 0 auto;
}

/* ── Carte médaillon (figure) ─────────────────────────────────────────── */
.sb-duo__card {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vh, 28px);
}

/* Halo radial derrière chaque carte qui respire (visible au hover) */
.sb-duo__card-halo {
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, #FFE9B8 28%, transparent) 0%,
        transparent 65%
    );
    opacity: 0;
    transition: opacity 0.6s var(--sb-ease-flow);
    pointer-events: none;
    z-index: -1;
}

/* ── Le blob — forme organique morphing + glass + frame interne or ──── */
.sb-duo__blob {
    position: relative;
    width: clamp(220px, 42vw, 320px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sb-glass-bg-strong);
    isolation: isolate;
    /* Forme organique initiale — état de référence du morphing */
    border-radius: 52% 48% 56% 44% / 60% 56% 44% 40%;
    box-shadow:
        inset 0 2px 0 var(--sb-glass-shine),
        inset 0 -3px 12px rgba(92, 75, 54, 0.4),
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(201, 168, 118, 0.2);
    animation: sb-duo-blob-morph 12s ease-in-out infinite;
    transition: transform 0.7s var(--sb-ease-flow), box-shadow 0.7s var(--sb-ease-flow);
}
/* Décalage de la mariée pour que les 2 blobs ne morphent pas en sync */
.sb-duo__card--bride .sb-duo__blob {
    animation-delay: -6s;
    /* Léger angle initial pour effet "diptyque" */
    transform: rotate(2deg);
}
.sb-duo__card--groom .sb-duo__blob {
    transform: rotate(-2deg);
}
@keyframes sb-duo-blob-morph {
    0%, 100% { border-radius: 52% 48% 56% 44% / 60% 56% 44% 40%; }
    20%      { border-radius: 48% 52% 50% 50% / 55% 60% 40% 45%; }
    40%      { border-radius: 56% 44% 60% 40% / 50% 52% 48% 50%; }
    60%      { border-radius: 44% 56% 48% 52% / 65% 48% 52% 35%; }
    80%      { border-radius: 50% 50% 56% 44% / 58% 55% 45% 42%; }
}

/* Inner glow ambré qui respire en counter-phase */
.sb-duo__blob-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 50% 100%,
        color-mix(in srgb, #5C4B36 55%, transparent) 0%,
        transparent 60%
    );
    mix-blend-mode: multiply;
    opacity: 0.7;
    animation: sb-duo-blob-glow 5s ease-in-out infinite;
}
@keyframes sb-duo-blob-glow {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.85; }
}

/* Reflet doré qui traverse en diagonale — sweep continu */
.sb-duo__blob-shine {
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 233, 184, 0.0) 42%,
        rgba(255, 233, 184, 0.5) 50%,
        rgba(255, 233, 184, 0.0) 58%,
        transparent 70%
    );
    transform: translateY(0);
    animation: sb-duo-blob-sweep 7s ease-in-out infinite;
}
.sb-duo__card--bride .sb-duo__blob-shine { animation-delay: -3.5s; }
@keyframes sb-duo-blob-sweep {
    0%   { transform: translateY(-50%) translateX(-30%); opacity: 0; }
    35%  { opacity: 0; }
    50%  { opacity: 1; }
    65%  { opacity: 0; }
    100% { transform: translateY(50%) translateX(30%); opacity: 0; }
}

/* Liseré or fin intérieur — souligne les contours organiques */
.sb-duo__blob-frame {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1.5px var(--sb-glass-border),
        inset 0 0 24px rgba(92, 75, 54, 0.45);
}

/* La photo elle-même — fill cover, Ken Burns subtle */
.sb-duo__photo-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: inherit;
}
.sb-duo__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s var(--sb-ease-flow);
}

/* Initiale (fallback sans photo) — Cormorant italique géant en gradient or */
.sb-duo__initial {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 1;
    color: transparent;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 233, 184, 0.4);
    border-radius: inherit;
}

/* ── Caption sous le blob — eyebrow + nom + ornement ──────────────────── */
.sb-duo__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.sb-duo__role {
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: color-mix(in srgb, #C9A876 90%, transparent);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.sb-duo__name {
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.1;
    color: #FFE9B8;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 0 22px rgba(201, 168, 118, 0.35);
    letter-spacing: 0.01em;
}
.sb-duo__ornament {
    margin-top: 2px;
    font-size: 0.65rem;
    color: #C9A876;
    text-shadow: 0 0 8px rgba(255, 233, 184, 0.45);
    opacity: 0.85;
}

/* ── Ruban d'or serpentin au centre + esperluette + burst ────────────── */
.sb-duo__ribbon {
    position: relative;
    width: clamp(60px, 16vw, 200px);
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-duo__ribbon-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgba(255, 233, 184, 0.5));
}
/* SVG vertical caché sur desktop, horizontal visible */
.sb-duo__ribbon-svg--v { display: none; }
.sb-duo__ribbon-path {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: sb-duo-ribbon-draw 1.8s cubic-bezier(0.7, 0, 0.3, 1) 0.4s forwards;
}
.sb-duo__ribbon-path--v {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
}
@keyframes sb-duo-ribbon-draw {
    to { stroke-dashoffset: 0; }
}

/* L'esperluette calligraphique — apparition dans un burst après le ruban */
.sb-duo__amp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    color: #FFE9B8;
    line-height: 1;
    text-shadow:
        0 0 12px rgba(255, 233, 184, 0.95),
        0 0 28px rgba(201, 168, 118, 0.65),
        0 0 48px rgba(201, 168, 118, 0.4);
    opacity: 0;
    animation:
        sb-duo-amp-appear 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards,
        sb-duo-amp-breathe 3s ease-in-out 2.7s infinite;
}
@keyframes sb-duo-amp-appear {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-30deg); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(8deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes sb-duo-amp-breathe {
    0%, 100% { text-shadow: 0 0 12px rgba(255, 233, 184, 0.95), 0 0 28px rgba(201, 168, 118, 0.65), 0 0 48px rgba(201, 168, 118, 0.4); }
    50%      { text-shadow: 0 0 18px rgba(255, 233, 184, 1),    0 0 38px rgba(201, 168, 118, 0.85), 0 0 64px rgba(201, 168, 118, 0.55); }
}

/* Burst — anneau d'or qui éclate au moment de l'apparition de l'esperluette */
.sb-duo__amp-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(80px, 12vw, 140px);
    height: clamp(80px, 12vw, 140px);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    border: 2px solid #FFE9B8;
    opacity: 0;
    pointer-events: none;
    animation: sb-duo-amp-burst 1.2s ease-out 1.85s forwards;
}
@keyframes sb-duo-amp-burst {
    0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.3); border-width: 2px; }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(3);   border-width: 0; }
}

/* ── Hover desktop : tilt 3D + intensification glow + Ken Burns photo ── */
@media (hover: hover) {
    .sb-duo__card {
        cursor: pointer;
        perspective: 1000px;
    }
    .sb-duo__card--groom:hover .sb-duo__blob {
        transform: rotate(-3deg) scale(1.04) rotateY(-3deg);
        box-shadow:
            inset 0 2px 0 var(--sb-glass-shine),
            inset 0 -3px 12px rgba(92, 75, 54, 0.4),
            0 40px 80px rgba(0, 0, 0, 0.55),
            0 0 60px rgba(255, 233, 184, 0.35);
    }
    .sb-duo__card--bride:hover .sb-duo__blob {
        transform: rotate(3deg) scale(1.04) rotateY(3deg);
        box-shadow:
            inset 0 2px 0 var(--sb-glass-shine),
            inset 0 -3px 12px rgba(92, 75, 54, 0.4),
            0 40px 80px rgba(0, 0, 0, 0.55),
            0 0 60px rgba(255, 233, 184, 0.35);
    }
    .sb-duo__card:hover .sb-duo__card-halo {
        opacity: 1;
    }
    .sb-duo__card:hover .sb-duo__photo {
        transform: scale(1.08);
    }
}

/* ── Mobile : stack vertical, ruban devient vertical via swap SVG ───── */
@media (max-width: 720px) {
    .sb-duo__pair {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vh, 36px);
        justify-items: center;
    }
    .sb-duo__card--groom { order: 1; }
    .sb-duo__ribbon      { order: 2; }
    .sb-duo__card--bride { order: 3; }

    /* Swap : horizontal caché, vertical visible */
    .sb-duo__ribbon {
        width: clamp(60px, 18vh, 100px);
        aspect-ratio: 1 / 2;
    }
    .sb-duo__ribbon-svg--h { display: none; }
    .sb-duo__ribbon-svg--v { display: block; }

    /* Blob full width sur mobile (ratio préservé) */
    .sb-duo__blob {
        width: min(78vw, 340px);
    }

    /* Légère réduction de l'angle initial mobile (moins agressif) */
    .sb-duo__card--groom .sb-duo__blob { transform: rotate(-1.5deg); }
    .sb-duo__card--bride .sb-duo__blob { transform: rotate(1.5deg); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion (Phase 2)
   Désactive toutes les animations Phase 2 : breathe, halo, sand-flow, amp-glow.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sb-hero__ambient,
    .sb-hero__sablier,
    .sb-hero__sand-stream,
    .sb-hero__amp,
    .sb-hero__cta-icon,
    body.theme-sablier-page .sb-hero__bg img,
    .sb-verse__halo,
    .sb-verse__phylactere,
    .sb-duo__halo-core,
    .sb-duo__halo-aura,
    .sb-duo__particle,
    .sb-duo__blob,
    .sb-duo__blob-glow,
    .sb-duo__blob-shine,
    .sb-duo__title em,
    .sb-duo__ribbon-path,
    .sb-duo__amp,
    .sb-duo__amp-burst,
    .sb-duo__photo {
        animation: none !important;
        transition: none !important;
    }
    body.theme-sablier-page .sb-hero__bg img {
        transform: scale(1.05) !important;
    }
    /* État final visible pour les éléments séquencés */
    .sb-duo__ribbon-path { stroke-dashoffset: 0 !important; }
    .sb-duo__amp {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
    .sb-duo__amp-burst { opacity: 0 !important; }
    .sb-duo__card--groom .sb-duo__blob { transform: rotate(-2deg) !important; }
    .sb-duo__card--bride .sb-duo__blob { transform: rotate(2deg)  !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 3 — NOTRE HISTOIRE « LES GOUTTES D'AMBRE FIGÉES »
   Chaque milestone = goutte 3D en verre ambré contenant le média. Forme orga-
   nique (border-radius asymétrique imitant la goutte de miel cristallisée).
   Reveal au scroll (stagger 90ms), hover = mouvement subtil + reflet doré
   qui traverse la goutte. Override complet du chapter parent (.inv2-chapter).
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .sb-story-chapter {
    position: relative;
    padding: clamp(48px, 7vh, 84px) clamp(16px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 6vh, 56px);
    isolation: isolate;
}

/* Header — éphéméride + titre + sous-titre */
.sb-story__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    max-width: 540px;
}
.sb-story__chapter-num {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--sb-glass-border);
    border-radius: 50%;
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 6px 18px rgba(0, 0, 0, 0.3);
}
.sb-story__chapter-num-inner {
    font-family: var(--sb-font-numeric);
    font-size: 1.3rem;
    font-weight: 500;
    color: transparent;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sb-story__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #C9A876;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.sb-story__eyebrow-line {
    display: inline-block;
    width: clamp(28px, 8vw, 56px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A876 50%, transparent 100%);
}
.sb-story__title {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #FFE9B8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 18px rgba(201, 168, 118, 0.35);
}
.sb-story__subtitle {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, #FAF6EE 75%, transparent);
}

/* Grille de gouttes — 3 colonnes desktop, 2 mobile, 1 ≤ 380px */
.sb-story__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 36px);
    width: 100%;
    max-width: 920px;
    padding: 0 8px;
}

/* Une goutte = bouton sémantique (déclenche le StoryViewer) */
.sb-story__droplet {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    transition: transform 0.45s var(--sb-ease-flow);
}
.sb-story__droplet:hover,
.sb-story__droplet:focus-visible {
    transform: translateY(-6px);
    outline: none;
}

/* ── L'ŒUF D'OR — Forme authentique (pointu en haut, large en bas) ─────
   Border-radius asymétrique : vertical bas 62-65% (large/arrondi) vs
   vertical haut 36-40% (pointu). Le contenu (img/vidéo) est strictement
   clippé par la forme via overflow hidden + border-radius. Aspect-ratio
   3/4 pour respecter la silhouette d'un œuf authentique. */
.sb-story__droplet-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    /* Forme d'œuf authentique — pointu en haut, large en bas */
    border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
    background: transparent;
    box-shadow:
        /* Highlight intérieur au sommet (réflexion de lumière) */
        inset 0 4px 0 rgba(255, 233, 184, 0.3),
        /* Ombre douce intérieure à la base (volume coquille) */
        inset 0 -10px 24px rgba(92, 75, 54, 0.55),
        /* Liseré or fin tout autour */
        inset 0 0 0 1px var(--sb-glass-border),
        /* Ombre portée — l'œuf est posé sur l'horizon */
        0 22px 44px rgba(0, 0, 0, 0.5),
        /* Halo or ambient subtil */
        0 0 28px rgba(201, 168, 118, 0.22);
    isolation: isolate;
    transition:
        transform 0.6s var(--sb-ease-flow),
        box-shadow 0.6s var(--sb-ease-flow);
    /* Morphing très subtil qui préserve l'identité d'œuf */
    animation: sb-egg-breathe 9s ease-in-out infinite;
}
@keyframes sb-egg-breathe {
    0%, 100% { border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; }
    33%      { border-radius: 48% 52% 52% 48% / 36% 40% 60% 64%; }
    66%      { border-radius: 52% 48% 48% 52% / 40% 36% 64% 60%; }
}

.sb-story__droplet:hover .sb-story__droplet-media,
.sb-story__droplet:focus-visible .sb-story__droplet-media {
    /* Hover : l'œuf "vibre" et s'illumine subtilement, MAIS reste un œuf.
       Pas de halo doré débordant — juste un léger renforcement de l'ombre
       portée pour signifier l'élévation. La bordure or vif est gérée par
       .sb-story__droplet-frame (seul responsable du liseré au hover). */
    transform: scale(1.035) rotate(-0.8deg);
    box-shadow:
        inset 0 4px 0 rgba(255, 233, 184, 0.4),
        inset 0 -10px 24px rgba(92, 75, 54, 0.55),
        inset 0 0 0 1px var(--sb-glass-border),
        0 28px 56px rgba(0, 0, 0, 0.55);
}

/* Le contenu (img/vidéo) — strictement clippé par la forme de l'œuf,
   object-position center 30% pour valoriser les visages (souvent en haut). */
.sb-story__droplet-media img,
.sb-story__droplet-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    z-index: 1;
    border-radius: inherit;
}

/* Highlight de coquille — reflet brillant au sommet de l'œuf
   (rappel de la lumière naturelle qui frappe le haut de la coquille). */
.sb-story__droplet-highlight {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: 24%;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(255, 233, 184, 0.65) 0%,
        rgba(255, 233, 184, 0.22) 40%,
        transparent 75%
    );
    pointer-events: none;
    filter: blur(6px);
    opacity: 0.85;
}

/* Base ombrée — gradient au bas de l'œuf (volume 3D, ancrage) */
.sb-story__droplet-base {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(92, 75, 54, 0.15) 60%,
        rgba(92, 75, 54, 0.5) 100%
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Liseré or qui ceinture l'œuf — suit la forme via border-radius inherit */
.sb-story__droplet-frame {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1.5px var(--sb-glass-border),
        inset 0 0 26px rgba(92, 75, 54, 0.4);
    transition: box-shadow 0.5s var(--sb-ease-flow);
}
.sb-story__droplet:hover .sb-story__droplet-frame,
.sb-story__droplet:focus-visible .sb-story__droplet-frame {
    /* Liseré or seul responsable du highlight au hover (pas de double
       bordure avec .sb-story__droplet-media). Subtle intensification. */
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 233, 184, 0.85),
        inset 0 0 24px rgba(255, 233, 184, 0.18);
}

/* Reflet doré qui sweep en diagonale (hover) */
.sb-story__droplet-shine {
    position: absolute;
    top: -150%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 3;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 233, 184, 0.0) 42%,
        rgba(255, 233, 184, 0.55) 50%,
        rgba(255, 233, 184, 0.0) 58%,
        transparent 70%
    );
    transform: translateY(0) rotate(0);
    pointer-events: none;
    opacity: 0;
    transition: all 0.9s var(--sb-ease-flow);
    border-radius: inherit;
}
.sb-story__droplet:hover .sb-story__droplet-shine,
.sb-story__droplet:focus-visible .sb-story__droplet-shine {
    opacity: 1;
    transform: translateY(50%);
}

/* Indice play vidéo — positionné dans la zone arrondie centre-bas de l'œuf
   (et non dans le coin qui n'existe plus avec la forme organique). */
.sb-story__droplet-play {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(92, 75, 54, 0.78);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 233, 184, 0.4);
    color: #FFE9B8;
    font-size: 0.78rem;
    padding-left: 3px;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(255, 233, 184, 0.2);
    transition: all 0.35s var(--sb-ease-flow);
}
.sb-story__droplet:hover .sb-story__droplet-play {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    border-color: #FFE9B8;
    transform: translateX(-50%) scale(1.15);
    box-shadow:
        0 8px 22px rgba(201, 168, 118, 0.55),
        0 0 28px rgba(255, 233, 184, 0.5);
}

/* Empty state — losange or géant au centre de l'œuf si pas de media */
.sb-story__droplet-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: transparent;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    border-radius: inherit;
    /* Fond ambre subtil pour donner du corps à l'œuf vide */
    background-color: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}

/* Caption sous la goutte — date + titre */
.sb-story__droplet-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 6px;
}
.sb-story__droplet-date {
    font-family: var(--sb-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C9A876;
}
.sb-story__droplet-title {
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    color: #FAF6EE;
    line-height: 1.3;
}

/* Mobile portrait — 2 colonnes, gouttes plus petites */
@media (max-width: 720px) {
    .sb-story__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}
@media (max-width: 380px) {
    .sb-story__grid {
        grid-template-columns: 1fr;
        max-width: 280px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   STORYVIEWER OVERLAY — Scope sablier (override des contrôles, progress, fond)
   Le viewer parent (.inv-stories) reste fonctionnel — on ne fait que styler
   ses sous-éléments pour les fondre dans l'univers verre soufflé + or.
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .inv-stories {
    background:
        radial-gradient(
            ellipse 70% 60% at 50% 50%,
            color-mix(in srgb, #5C4B36 35%, #000) 0%,
            #000 80%
        );
}

/* Bouton fermer — verre soufflé doré */
body.theme-sablier-page .inv-stories__close,
body.theme-sablier-page .inv-stories__mute-btn {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--sb-glass-border);
    color: #FFE9B8;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 6px 16px rgba(0, 0, 0, 0.5);
}
body.theme-sablier-page .inv-stories__close:hover,
body.theme-sablier-page .inv-stories__mute-btn:hover {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    border-color: #FFE9B8;
}

/* Compteur slides */
body.theme-sablier-page .inv-stories__counter {
    color: #C9A876;
    font-family: var(--sb-font-body);
    letter-spacing: 0.18em;
}

/* Barre de progression — sablier horizontal qui se vide */
body.theme-sablier-page .inv-stories__progress-dot {
    background: rgba(201, 168, 118, 0.2);
}
body.theme-sablier-page .inv-stories__progress-dot--active {
    background: linear-gradient(90deg, #FFE9B8 0%, #C9A876 100%);
    box-shadow: 0 0 8px rgba(255, 233, 184, 0.5);
}
body.theme-sablier-page .inv-stories__progress-dot--past {
    background: rgba(201, 168, 118, 0.55);
}

/* Vidéo — barre de progression or */
body.theme-sablier-page .inv-stories__video-progress-fill {
    background: linear-gradient(90deg, #C9A876 0%, #FFE9B8 100%);
    box-shadow: 0 0 6px rgba(255, 233, 184, 0.4);
}

/* Caption — date en or, titre Cormorant italique amber */
body.theme-sablier-page .inv-stories__date {
    color: #FFE9B8;
    border-bottom-color: rgba(201, 168, 118, 0.55);
    font-family: var(--sb-font-body);
}
body.theme-sablier-page .inv-stories__title {
    font-family: var(--sb-font-display);
    color: #FAF6EE;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 18px rgba(201, 168, 118, 0.25);
}

/* ═════════════════════════════════════════════════════════════════════════════
   TIME PORTAL SABLIER — « Remontez le sablier »
   Overlay 3.5s déclenché avant l'ouverture du StoryViewer.
   Sablier géant + caption « chaque instant est un grain d'or ».
   Pattern symétrique au .ir-time-portal royal mais avec scénographie sablier.
   ═════════════════════════════════════════════════════════════════════════════ */

.sb-time-portal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--sb-ease-flow);
}
.sb-time-portal.show {
    opacity: 1;
    pointer-events: auto;
}
.sb-time-portal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 70% 60% at 50% 50%,
            color-mix(in srgb, #5C4B36 60%, #000) 0%,
            #000 75%
        );
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.sb-time-portal__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 20px;
    text-align: center;
}

/* Sablier géant central qui pivote lentement */
.sb-time-portal__hourglass {
    width: clamp(120px, 30vw, 180px);
    height: clamp(170px, 42vw, 240px);
    filter: drop-shadow(0 0 24px rgba(255, 233, 184, 0.5));
    animation: sb-time-portal-rotate 3.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes sb-time-portal-rotate {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
.sb-time-portal__hourglass svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.sb-time-portal__sand-falling {
    stroke-dasharray: 2 4;
    animation: sb-time-portal-flow 0.6s linear infinite;
}
@keyframes sb-time-portal-flow {
    to { stroke-dashoffset: -12; }
}

/* Caption — Cormorant italique doré centré */
.sb-time-portal__caption {
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 3vw, 1.45rem);
    line-height: 1.4;
    color: #FFE9B8;
    text-shadow: 0 0 12px rgba(201, 168, 118, 0.6);
    max-width: 420px;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: sb-time-portal-caption 1.2s var(--sb-ease-flow) 0.4s forwards;
}
@keyframes sb-time-portal-caption {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Particules dorées qui flottent autour (3 anneaux orbitaux) */
.sb-time-portal__orbits {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sb-time-portal__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(201, 168, 118, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.sb-time-portal__orbit:nth-child(1) { width: 240px; height: 240px; animation: sb-time-portal-orbit 6s linear infinite; }
.sb-time-portal__orbit:nth-child(2) { width: 360px; height: 360px; animation: sb-time-portal-orbit 9s linear infinite reverse; }
.sb-time-portal__orbit:nth-child(3) { width: 480px; height: 480px; animation: sb-time-portal-orbit 12s linear infinite; }
@keyframes sb-time-portal-orbit {
    0%   { transform: translate(-50%, -50%) rotate(0); opacity: 0.7; }
    50%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.7; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion (Phase 3)
   ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sb-story__droplet,
    .sb-story__droplet-media,
    .sb-story__droplet-shine,
    .sb-story__droplet-frame,
    .sb-time-portal__hourglass,
    .sb-time-portal__sand-falling,
    .sb-time-portal__orbit,
    .sb-time-portal__caption {
        animation: none !important;
        transition: none !important;
    }
    .sb-story__droplet:hover,
    .sb-story__droplet:focus-visible { transform: none !important; }
    .sb-story__droplet:hover .sb-story__droplet-media,
    .sb-story__droplet:focus-visible .sb-story__droplet-media {
        /* Forme d'œuf préservée même en reduced-motion */
        border-radius: 50% 50% 50% 50% / 38% 38% 62% 62% !important;
        transform: none !important;
    }
    .sb-time-portal__caption { opacity: 1 !important; transform: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 3.5 — LE CORTÈGE DE SOIE « LES TENUES D'AMBRE »
   Direction artistique propre à cette section : tenues présentées sur fond
   ambre velouté (jamais blanc) dans des cartes à bordure or animée, avec
   piédestal doré au pied (comme exposées dans une boutique de couture).
   Ornement losange or pulsant au centre du diptyque (signature Sablier).
   Palette du mariage : orbes de verre soufflé tournant comme des perles.
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .sb-dress {
    position: relative;
    padding: clamp(48px, 7vh, 84px) clamp(16px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vh, 64px);
    isolation: isolate;
    overflow: hidden;
}

/* Ambient — halo central + 8 particules dorées flottantes */
.sb-dress__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.sb-dress__halo-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(380px, 70vw, 700px);
    height: clamp(380px, 70vw, 700px);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, #C9A876 16%, transparent) 0%,
        transparent 70%
    );
    animation: sb-dress-halo 9s ease-in-out infinite;
}
@keyframes sb-dress-halo {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
.sb-dress__particle {
    position: absolute;
    width: 4px;
    height: 6px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 30% 30%, #FFE9B8 0%, #C9A876 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 233, 184, 0.55);
    opacity: 0;
    animation: sb-dress-particle 15s ease-in-out infinite;
}
.sb-dress__particle:nth-child(2) { left: 8%;  top: 100%; animation-delay: 0s;    animation-duration: 14s; }
.sb-dress__particle:nth-child(3) { left: 22%; top: 100%; animation-delay: 2.3s;  animation-duration: 17s; transform: scale(0.7); }
.sb-dress__particle:nth-child(4) { left: 38%; top: 100%; animation-delay: 4.6s;  animation-duration: 13s; transform: scale(1.2); }
.sb-dress__particle:nth-child(5) { left: 55%; top: 100%; animation-delay: 7.1s;  animation-duration: 15s; }
.sb-dress__particle:nth-child(6) { left: 68%; top: 100%; animation-delay: 9.4s;  animation-duration: 14s; transform: scale(0.85); }
.sb-dress__particle:nth-child(7) { left: 78%; top: 100%; animation-delay: 11.7s; animation-duration: 16s; }
.sb-dress__particle:nth-child(8) { left: 88%; top: 100%; animation-delay: 1.5s;  animation-duration: 15.5s; transform: scale(1.1); }
.sb-dress__particle:nth-child(9) { left: 96%; top: 100%; animation-delay: 5.8s;  animation-duration: 13.5s; }
@keyframes sb-dress-particle {
    0%   { transform: translateY(0)     scale(var(--scale, 1)); opacity: 0; }
    10%  { opacity: 0.65; }
    50%  { opacity: 1; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-110vh) scale(var(--scale, 1)); opacity: 0; }
}

/* ── Header éditorial ────────────────────────────────────────────────── */
.sb-dress__header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    max-width: 640px;
}
.sb-dress__chapter-num {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--sb-glass-border);
    border-radius: 50%;
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 var(--sb-glass-shine), 0 6px 18px rgba(0, 0, 0, 0.3);
    margin-bottom: 4px;
}
.sb-dress__chapter-num-inner {
    font-family: var(--sb-font-numeric);
    font-size: 1.3rem;
    font-weight: 500;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sb-dress__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #C9A876;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.sb-dress__eyebrow--small {
    font-size: 0.66rem;
    letter-spacing: 0.3em;
}
.sb-dress__eyebrow-line {
    display: inline-block;
    width: clamp(28px, 8vw, 56px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A876 50%, transparent 100%);
}
.sb-dress__title {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #FFE9B8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 18px rgba(201, 168, 118, 0.35);
}
.sb-dress__description {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, #FAF6EE 75%, transparent);
}

/* ── Diptyque tenues — grid 1fr / auto / 1fr (desktop) → colonne mobile ── */
.sb-dress__pair {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: clamp(20px, 4vw, 56px);
    max-width: 1080px;
    width: 100%;
}
.sb-dress__pair--single {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
}

/* ── Carte tenue ─────────────────────────────────────────────────────── */
.sb-dress__card {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
}

/* Halo derrière chaque carte (visible au hover) */
.sb-dress__card-halo {
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse 60% 70% at 50% 40%,
        color-mix(in srgb, #FFE9B8 22%, transparent) 0%,
        transparent 65%
    );
    opacity: 0;
    transition: opacity 0.6s var(--sb-ease-flow);
    pointer-events: none;
    z-index: -1;
}

/* Frame de la tenue — fond ambre studio (clair au sommet pour éclairer le
   visage, profond aux bords pour donner du volume). Combinaison étudiée
   avec mix-blend-mode: multiply sur la photo : le blanc se dissout, la
   tenue et le visage se fondent dans la palette ambrée comme un portrait
   peint à l'huile. */
.sb-dress__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    isolation: isolate;
    /* Forme organique signature — pas un rectangle pur */
    border-radius: 18% 18% 24% 24% / 12% 12% 28% 28%;
    /* Studio glow ambré : lumière chaude qui descend du haut */
    background:
        radial-gradient(
            ellipse 100% 75% at 50% 18%,
            #FAF6EE 0%,
            #F0E7D2 22%,
            #E8D4A2 50%,
            #C9A876 80%,
            #8B6F46 100%
        );
    box-shadow:
        inset 0 4px 0 rgba(255, 255, 255, 0.5),
        inset 0 -12px 28px rgba(92, 75, 54, 0.45),
        0 24px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(201, 168, 118, 0.25);
    transition: all 0.6s var(--sb-ease-flow);
}

/* Bordure or fine animée — sweep gradient sur le contour */
.sb-dress__frame-border {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1.5px var(--sb-glass-border);
    transition: box-shadow 0.5s var(--sb-ease-flow);
}

/* La photo tenue — object-fit contain pour préserver les proportions.
   mix-blend-mode: multiply élimine le fond blanc des JPG (blanc × ambre =
   ambre, donc le fond blanc se dissout dans le gradient du frame). Les
   tenues + visages restent visibles, fusionnés dans la palette ambrée. */
.sb-dress__photo-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    cursor: zoom-in;
    border-radius: inherit;
    overflow: hidden;
    mix-blend-mode: multiply;
}
.sb-dress__photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 1s var(--sb-ease-flow);
}

/* Shimmer — reflet doré qui descend en diagonale (comme un voile de soie) */
.sb-dress__shimmer {
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 2;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 233, 184, 0.0) 42%,
        rgba(255, 233, 184, 0.4) 50%,
        rgba(255, 233, 184, 0.0) 58%,
        transparent 70%
    );
    transform: translateY(-30%);
    pointer-events: none;
    border-radius: inherit;
    animation: sb-dress-shimmer 8s ease-in-out infinite;
}
.sb-dress__card--women .sb-dress__shimmer { animation-delay: -4s; }
@keyframes sb-dress-shimmer {
    0%, 30%   { transform: translateY(-30%); opacity: 0; }
    50%       { opacity: 1; }
    70%, 100% { transform: translateY(70%);  opacity: 0; }
}

/* Piédestal — ombre dorée au pied de la tenue (effet exposition) */
.sb-dress__pedestal {
    position: absolute;
    bottom: 3%;
    left: 15%;
    right: 15%;
    height: 12px;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(201, 168, 118, 0.55) 0%,
        rgba(201, 168, 118, 0.2) 50%,
        transparent 80%
    );
    filter: blur(4px);
    pointer-events: none;
    animation: sb-dress-pedestal 4s ease-in-out infinite;
}
.sb-dress__card--women .sb-dress__pedestal { animation-delay: -2s; }
@keyframes sb-dress-pedestal {
    0%, 100% { opacity: 0.6; transform: scaleX(1); }
    50%      { opacity: 0.9; transform: scaleX(1.1); }
}

/* Caption — rôle + description #}
   Eyebrow uppercase or + nom Cormorant italique + losange ornement */
.sb-dress__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    max-width: 280px;
}
.sb-dress__role {
    font-family: var(--sb-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #C9A876;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.sb-dress__role-desc {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 1.5;
    color: #FAF6EE;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.sb-dress__role-ornament {
    font-size: 0.6rem;
    color: #C9A876;
    text-shadow: 0 0 8px rgba(255, 233, 184, 0.45);
    opacity: 0.85;
}

/* ── Ornement central — losange or pulsant entre les 2 cartes ────────── */
.sb-dress__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    justify-content: center;
    min-width: 30px;
}
.sb-dress__divider-line {
    width: 1.5px;
    height: clamp(40px, 12vh, 80px);
    background: linear-gradient(180deg, transparent 0%, #C9A876 50%, transparent 100%);
    box-shadow: 0 0 6px rgba(255, 233, 184, 0.4);
}
.sb-dress__divider-diamond {
    font-size: 1.4rem;
    color: #FFE9B8;
    text-shadow:
        0 0 10px rgba(255, 233, 184, 0.9),
        0 0 22px rgba(201, 168, 118, 0.6);
    animation: sb-dress-diamond 2.6s ease-in-out infinite;
}
@keyframes sb-dress-diamond {
    0%, 100% { transform: scale(1) rotate(0);    text-shadow: 0 0 10px rgba(255, 233, 184, 0.9), 0 0 22px rgba(201, 168, 118, 0.6); }
    50%      { transform: scale(1.18) rotate(45deg); text-shadow: 0 0 16px rgba(255, 233, 184, 1), 0 0 32px rgba(201, 168, 118, 0.85); }
}

/* Hover desktop — la carte s'illumine, la tenue lévite légèrement */
@media (hover: hover) {
    .sb-dress__card { cursor: pointer; }
    .sb-dress__card:hover .sb-dress__frame {
        transform: translateY(-6px);
        box-shadow:
            inset 0 4px 0 rgba(255, 233, 184, 0.35),
            inset 0 -8px 20px rgba(92, 75, 54, 0.5),
            0 32px 64px rgba(0, 0, 0, 0.6),
            0 0 50px rgba(201, 168, 118, 0.4);
    }
    .sb-dress__card:hover .sb-dress__card-halo { opacity: 1; }
    .sb-dress__card:hover .sb-dress__photo {
        transform: translateY(-4px) scale(1.03);
        filter: drop-shadow(0 18px 24px rgba(92, 75, 54, 0.6));
    }
    .sb-dress__card:hover .sb-dress__frame-border {
        box-shadow: inset 0 0 0 1.5px rgba(255, 233, 184, 0.85);
    }
    .sb-dress__card:hover .sb-dress__pedestal {
        opacity: 1;
        transform: scaleX(1.2);
    }
}

/* ── Palette des couleurs — orbes de verre soufflé ───────────────────── */
.sb-dress__palette {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 4vh, 40px);
    max-width: 760px;
    width: 100%;
    margin-top: clamp(24px, 4vh, 40px);
    padding-top: clamp(36px, 5vh, 56px);
    border-top: 1px solid rgba(201, 168, 118, 0.18);
}
.sb-dress__palette-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.sb-dress__palette-title {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    color: #FFE9B8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 18px rgba(201, 168, 118, 0.3);
}
.sb-dress__palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: clamp(18px, 3vw, 28px);
    width: 100%;
    max-width: 660px;
}
.sb-dress__swatch {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform 0.5s var(--sb-ease-flow);
}
.sb-dress__swatch-orb {
    position: relative;
    display: block;
    width: clamp(64px, 14vw, 88px);
    height: clamp(64px, 14vw, 88px);
    border-radius: 50%;
    box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.35),
        inset 0 -6px 12px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1.5px var(--sb-glass-border),
        0 14px 28px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(201, 168, 118, 0.3);
    overflow: hidden;
    isolation: isolate;
}
.sb-dress__swatch-orb-shine {
    position: absolute;
    top: 12%;
    left: 22%;
    width: 32%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.3) 40%,
        transparent 75%
    );
    filter: blur(2px);
    pointer-events: none;
}
.sb-dress__swatch-label {
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(0.85rem, 2vw, 1rem);
    color: #FAF6EE;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.02em;
}
@media (hover: hover) {
    .sb-dress__swatch:hover { transform: translateY(-4px) scale(1.05); }
    .sb-dress__swatch:hover .sb-dress__swatch-orb {
        box-shadow:
            inset 0 4px 6px rgba(255, 255, 255, 0.45),
            inset 0 -6px 12px rgba(0, 0, 0, 0.45),
            inset 0 0 0 2px #FFE9B8,
            0 18px 34px rgba(0, 0, 0, 0.55),
            0 0 36px rgba(255, 233, 184, 0.55);
    }
}

/* ── Mobile : stack vertical, divider rotated horizontal ─────────────── */
@media (max-width: 720px) {
    .sb-dress__pair {
        grid-template-columns: 1fr;
        gap: clamp(28px, 5vh, 44px);
        max-width: 380px;
    }
    .sb-dress__card--men   { order: 1; }
    .sb-dress__divider     { order: 2; flex-direction: row; min-width: 0; }
    .sb-dress__divider-line {
        width: clamp(40px, 12vw, 60px);
        height: 1.5px;
        background: linear-gradient(90deg, transparent 0%, #C9A876 50%, transparent 100%);
    }
    .sb-dress__card--women { order: 3; }
}

/* ── Accessibilité — prefers-reduced-motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sb-dress__halo-core,
    .sb-dress__particle,
    .sb-dress__shimmer,
    .sb-dress__pedestal,
    .sb-dress__divider-diamond,
    .sb-dress__swatch,
    .sb-dress__photo,
    .sb-dress__frame {
        animation: none !important;
        transition: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 4 — PROGRAMME « LA COLONNE SABLIER »
   Colonne sablier verticale au centre + cartes alternées gauche/droite.
   Chaque event = goutte d'or sur la colonne + cartouche verre soufflé doré.
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .sb-programme-chapter {
    position: relative;
    padding: clamp(48px, 7vh, 84px) clamp(16px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vh, 64px);
    isolation: isolate;
}

/* Header — réutilise le style sb-story__header (chiffres + titre + sous-titre) */
.sb-programme__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    max-width: 540px;
}
.sb-programme__chapter-num {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--sb-glass-border);
    border-radius: 50%;
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 var(--sb-glass-shine), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.sb-programme__chapter-num-inner {
    font-family: var(--sb-font-numeric);
    font-size: 1.3rem;
    font-weight: 500;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sb-programme__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #C9A876;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.sb-programme__eyebrow-line {
    display: inline-block;
    width: clamp(28px, 8vw, 56px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A876 50%, transparent 100%);
}
.sb-programme__title {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #FFE9B8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 18px rgba(201, 168, 118, 0.35);
}
.sb-programme__subtitle {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, #FAF6EE 75%, transparent);
}

/* Timeline — container des events avec colonne centrale */
.sb-programme__timeline {
    position: relative;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 6vh, 56px);
    padding: clamp(20px, 4vh, 32px) 0;
}

/* Colonne sablier verticale au centre — gradient or fin */
.sb-programme__column {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        transparent 0%,
        #C9A876 8%,
        #FFE9B8 50%,
        #C9A876 92%,
        transparent 100%
    );
    box-shadow: 0 0 8px rgba(255, 233, 184, 0.4);
    pointer-events: none;
}

/* Event = ligne horizontale avec drop + card alternés */
.sb-programme__event {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 32px 1fr;
    align-items: start;
    gap: clamp(16px, 3vw, 28px);
}

/* Goutte d'or qui marque l'heure (positionnée au centre de la colonne) */
.sb-programme__drop {
    position: relative;
    grid-column: 2;
    width: 32px;
    height: 40px;
    align-self: start;
    margin-top: 18px;
    /* Forme de goutte : haut pointu + bas arrondi */
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    background: radial-gradient(
        ellipse at 35% 30%,
        #FFE9B8 0%,
        #C9A876 50%,
        #5C4B36 100%
    );
    box-shadow:
        inset 0 -3px 5px rgba(255, 233, 184, 0.45),
        0 0 16px rgba(255, 233, 184, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.sb-programme__drop-glow {
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 233, 184, 0.35) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s var(--sb-ease-flow);
}
/* Quand l'event est révélé au scroll (data-revealed set par EnhancedReveal),
   la goutte « s'allume » via le halo radial sur le pseudo .sb-programme__drop-glow */
.sb-programme__event[data-revealed] .sb-programme__drop-glow {
    opacity: 1;
}

/* Cartouche verre soufflé doré */
.sb-programme__card {
    padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 32px);
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
            backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--sb-glass-border);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        inset 0 -1px 0 rgba(92, 75, 54, 0.25),
        0 14px 36px rgba(0, 0, 0, 0.35);
}
/* Alternance gauche/droite */
.sb-programme__event--left .sb-programme__card {
    grid-column: 1;
    text-align: right;
}
.sb-programme__event--right .sb-programme__card {
    grid-column: 3;
    text-align: left;
}

/* Heure massive en Bodoni Moda or */
.sb-programme__hour {
    display: block;
    font-family: var(--sb-font-numeric);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 500;
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.02em;
}

/* Nom event Cormorant italique */
.sb-programme__name {
    margin: 0 0 12px;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: #FAF6EE;
}

.sb-programme__location,
.sb-programme__address,
.sb-programme__desc {
    margin: 0 0 8px;
    font-family: var(--sb-font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: color-mix(in srgb, #FAF6EE 78%, transparent);
}
.sb-programme__pin {
    color: #C9A876;
    margin-right: 4px;
}

/* Bandeau navigation — chips Google Maps + Yango */
.sb-programme__nav {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(201, 168, 118, 0.25);
}
.sb-programme__nav-label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #C9A876;
}
.sb-programme__nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sb-programme__event--left .sb-programme__nav-links { justify-content: flex-end; }
.sb-programme__event--right .sb-programme__nav-links { justify-content: flex-start; }

.sb-programme__nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: #FFE9B8;
    text-decoration: none;
    background: rgba(92, 75, 54, 0.5);
    border: 1px solid var(--sb-glass-border);
    border-radius: 999px;
    transition: all 0.3s var(--sb-ease-flow);
}
.sb-programme__nav-chip:hover {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    border-color: #FFE9B8;
    transform: translateY(-1px);
}

/* Mobile portrait — colonne décalée à gauche, cartes pleine largeur à droite */
@media (max-width: 720px) {
    .sb-programme__column {
        left: 22px;
        transform: none;
    }
    .sb-programme__event {
        grid-template-columns: 44px 1fr;
        gap: 14px;
    }
    .sb-programme__drop {
        grid-column: 1;
        justify-self: center;
    }
    .sb-programme__event--left .sb-programme__card,
    .sb-programme__event--right .sb-programme__card {
        grid-column: 2;
        text-align: left;
    }
    .sb-programme__event--left .sb-programme__nav-links,
    .sb-programme__event--right .sb-programme__nav-links {
        justify-content: flex-start;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   CALENDAR « MINI-SABLIERS »
   3 boutons en forme de mini sabliers (Google, Outlook, Apple). Au hover,
   le sable du mini-sablier tombe (animation 1s). Préserve les classes
   .inv2-calendar__btn--apple pour le JS iOS (invitation.js L6109).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Container .sb-cal — forme organique, halo + particules signature ─── */
body.theme-sablier-page .sb-cal {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: clamp(24px, 4vh, 40px) auto 0;
    padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 48px);
    /* Forme organique signature (légèrement asymétrique haut/bas) */
    border-radius: 28px 32px 32px 28px / 32px 28px 32px 28px;
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 0%,
            color-mix(in srgb, #C9A876 18%, transparent) 0%,
            transparent 70%
        ),
        var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
            backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--sb-glass-border);
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        inset 0 -1px 0 rgba(92, 75, 54, 0.3),
        0 24px 60px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(201, 168, 118, 0.2);
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}

/* Ambient — halo radial central + 4 particules dorées */
.sb-cal__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.sb-cal__halo {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, #FFE9B8 18%, transparent) 0%,
        transparent 60%
    );
    animation: sb-cal-halo 7s ease-in-out infinite;
}
@keyframes sb-cal-halo {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}
.sb-cal__particle {
    position: absolute;
    width: 4px;
    height: 6px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 30% 30%, #FFE9B8 0%, #C9A876 70%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 233, 184, 0.55);
    opacity: 0;
    animation: sb-cal-particle 14s ease-in-out infinite;
}
.sb-cal__particle:nth-of-type(2) { left: 12%; top: 100%; animation-delay: 0s;   animation-duration: 13s; }
.sb-cal__particle:nth-of-type(3) { left: 38%; top: 100%; animation-delay: 3.5s; animation-duration: 16s; transform: scale(0.7); }
.sb-cal__particle:nth-of-type(4) { left: 64%; top: 100%; animation-delay: 7s;   animation-duration: 14s; transform: scale(1.2); }
.sb-cal__particle:nth-of-type(5) { left: 86%; top: 100%; animation-delay: 10.5s; animation-duration: 15s; }
@keyframes sb-cal-particle {
    0%   { transform: translateY(0)    scale(var(--scale, 1)); opacity: 0; }
    15%  { opacity: 0.7; }
    50%  { opacity: 1; }
    85%  { opacity: 0.45; }
    100% { transform: translateY(-200px) scale(var(--scale, 1)); opacity: 0; }
}

/* ── Header — ornement losange + titre + subtitle ───────────────────── */
.sb-cal__header {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(28px, 4vh, 40px);
}
.sb-cal__ornament {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.sb-cal__ornament-line {
    display: inline-block;
    width: clamp(28px, 8vw, 48px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A876 50%, transparent 100%);
}
.sb-cal__ornament-diamond {
    font-size: 0.7rem;
    color: #FFE9B8;
    text-shadow: 0 0 10px rgba(255, 233, 184, 0.8), 0 0 18px rgba(201, 168, 118, 0.5);
    animation: sb-cal-diamond 2.6s ease-in-out infinite;
}
@keyframes sb-cal-diamond {
    0%, 100% { transform: rotate(0)    scale(1); }
    50%      { transform: rotate(45deg) scale(1.2); }
}
.sb-cal__title {
    margin: 0 0 10px;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.3rem, 3.4vw, 1.7rem);
    line-height: 1.25;
    color: #FFE9B8;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 18px rgba(201, 168, 118, 0.35);
}
.sb-cal__subtitle {
    margin: 0;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.92rem, 2.2vw, 1.02rem);
    line-height: 1.5;
    color: color-mix(in srgb, #FAF6EE 75%, transparent);
    max-width: 480px;
    margin: 0 auto;
}

/* ── Les Trois Grains d'Or — Grid 3 cols (desktop) → stack vertical (mobile) ── */
.sb-cal__grains {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2.5vw, 22px);
    margin-bottom: clamp(20px, 3vh, 28px);
}

/* Un grain = carte-bouton premium, forme organique signature */
.sb-cal__grain {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(22px, 4vw, 28px) clamp(14px, 2.5vw, 20px);
    text-decoration: none;
    color: #FAF6EE;
    /* Forme organique légèrement asymétrique (signature Sablier subtle) */
    border-radius: 22px 22px 28px 28px / 22px 22px 36px 36px;
    /* Fond gradient ambre profond */
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #5C4B36 55%, transparent) 0%,
            color-mix(in srgb, #5C4B36 75%, var(--tch-primary)) 100%
        );
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
            backdrop-filter: blur(14px) saturate(1.3);
    border: 1.5px solid var(--sb-glass-border);
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 12px 28px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.4s var(--sb-ease-flow),
        box-shadow 0.4s var(--sb-ease-flow),
        border-color 0.4s var(--sb-ease-flow);
}

/* Halo doré derrière (visible au hover) */
.sb-cal__grain-glow {
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        rgba(255, 233, 184, 0.35) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s var(--sb-ease-flow);
}

/* Frame intérieur — liseré or qui s'intensifie au hover */
.sb-cal__grain-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(201, 168, 118, 0.0);
    transition: box-shadow 0.5s var(--sb-ease-flow);
}

/* Reflet doré qui sweep en diagonale (hover) */
.sb-cal__grain-shine {
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 2;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 233, 184, 0.0) 45%,
        rgba(255, 233, 184, 0.4) 50%,
        rgba(255, 233, 184, 0.0) 55%,
        transparent 65%
    );
    transform: translateY(0);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Icône brand — taille large, centrée, gradient or */
.sb-cal__grain-icon {
    position: relative;
    z-index: 3;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    font-size: 1.25rem;
    box-shadow:
        inset 0 -2px 4px rgba(92, 75, 54, 0.4),
        0 6px 14px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(255, 233, 184, 0.2);
    transition: transform 0.4s var(--sb-ease-flow), box-shadow 0.4s var(--sb-ease-flow);
}

/* Texte — eyebrow "Ajouter à" + label brand */
.sb-cal__grain-body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.sb-cal__grain-eyebrow {
    font-family: var(--sb-font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, #C9A876 90%, transparent);
}
.sb-cal__grain-label {
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(0.95rem, 2.3vw, 1.08rem);
    line-height: 1.2;
    color: #FFE9B8;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

/* Flèche arrow — révélée au hover (signal d'action) */
.sb-cal__grain-arrow {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFE9B8;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.4s var(--sb-ease-flow);
}

/* Hover desktop — élévation + glow + shimmer + arrow révélée */
@media (hover: hover) {
    .sb-cal__grain:hover,
    .sb-cal__grain:focus-visible {
        transform: translateY(-6px);
        border-color: rgba(255, 233, 184, 0.65);
        box-shadow:
            inset 0 1px 0 var(--sb-glass-shine),
            inset 0 -1px 0 rgba(0, 0, 0, 0.2),
            0 20px 40px rgba(0, 0, 0, 0.5),
            0 0 36px rgba(255, 233, 184, 0.3);
        outline: none;
    }
    .sb-cal__grain:hover .sb-cal__grain-glow,
    .sb-cal__grain:focus-visible .sb-cal__grain-glow {
        opacity: 1;
    }
    .sb-cal__grain:hover .sb-cal__grain-frame,
    .sb-cal__grain:focus-visible .sb-cal__grain-frame {
        box-shadow: inset 0 0 0 1px rgba(255, 233, 184, 0.6);
    }
    .sb-cal__grain:hover .sb-cal__grain-shine {
        opacity: 1;
        animation: sb-cal-grain-shine 0.9s var(--sb-ease-flow);
    }
    .sb-cal__grain:hover .sb-cal__grain-icon {
        transform: scale(1.1);
        box-shadow:
            inset 0 -2px 4px rgba(92, 75, 54, 0.4),
            0 10px 22px rgba(0, 0, 0, 0.4),
            0 0 28px rgba(255, 233, 184, 0.5);
    }
    .sb-cal__grain:hover .sb-cal__grain-arrow {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes sb-cal-grain-shine {
    0%   { transform: translateY(-100%) translateX(-30%); }
    100% { transform: translateY(100%)  translateX(30%); }
}

/* Active tap (mobile) — feedback léger + scale down momentané */
.sb-cal__grain:active {
    transform: translateY(-2px) scale(0.98);
    transition: transform 0.15s ease;
}

/* Hint en bas — note discrète or */
.sb-cal__hint {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--sb-font-body);
    font-size: 0.78rem;
    color: color-mix(in srgb, #C9A876 85%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sb-cal__hint i { color: #FFE9B8; }

/* Mobile — stack vertical, grains horizontaux (icon à gauche, texte à droite) */
@media (max-width: 640px) {
    .sb-cal__grains {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .sb-cal__grain {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        text-align: left;
        border-radius: 18px;
    }
    .sb-cal__grain-icon {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    .sb-cal__grain-body {
        flex: 1;
        align-items: flex-start;
        gap: 2px;
        text-align: left;
    }
    .sb-cal__grain-label {
        white-space: normal;
    }
    /* Sur mobile, la flèche est toujours visible (signal d'action clair) */
    .sb-cal__grain-arrow {
        opacity: 0.7;
        transform: translateX(0);
        flex-shrink: 0;
    }
}

/* prefers-reduced-motion — désactivation propre */
@media (prefers-reduced-motion: reduce) {
    .sb-cal__halo,
    .sb-cal__particle,
    .sb-cal__ornament-diamond,
    .sb-cal__grain,
    .sb-cal__grain-glow,
    .sb-cal__grain-shine,
    .sb-cal__grain-icon,
    .sb-cal__grain-arrow {
        animation: none !important;
        transition: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 4 — RSVP « LES GOUTTES D'OR » (styling-only sur markup parent)
   Cartes event en flacon verre soufflé, boutons Oui/Peut-être/Non en gouttes
   d'or 3D. Scoping body.theme-sablier-page pour préserver les hooks JS.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Section RSVP — fond ambre profond avec halo */
body.theme-sablier-page .inv-rsvp-section {
    position: relative;
    padding: clamp(48px, 7vh, 84px) clamp(16px, 4vw, 40px);
    isolation: isolate;
}
body.theme-sablier-page .inv-rsvp-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 50% at 50% 30%,
        color-mix(in srgb, #C9A876 12%, transparent) 0%,
        transparent 70%
    );
    z-index: 0;
}

/* Indicator de chapitre — adapt au style sablier */
body.theme-sablier-page .inv2-chapter__indicator {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
    text-align: center;
}
body.theme-sablier-page .inv2-chapter__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--sb-glass-border);
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    font-family: var(--sb-font-numeric);
    font-size: 1.3rem;
    color: transparent;
    background-image: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%), var(--sb-glass-bg-strong);
    -webkit-background-clip: text, padding-box;
            background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
}
body.theme-sablier-page .inv2-chapter__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    font-family: var(--sb-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #C9A876;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
body.theme-sablier-page .inv2-chapter__label::before,
body.theme-sablier-page .inv2-chapter__label::after {
    content: "";
    display: inline-block;
    width: clamp(28px, 8vw, 56px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A876 50%, transparent 100%);
}

/* Section RSVP — titre + subtitle */
body.theme-sablier-page .inv-rsvp {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}
body.theme-sablier-page .inv-rsvp__title {
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: #FFE9B8;
    text-shadow: 0 0 12px rgba(201, 168, 118, 0.4);
}
body.theme-sablier-page .inv-rsvp__subtitle {
    font-family: var(--sb-font-display);
    font-style: italic;
    color: color-mix(in srgb, #FAF6EE 75%, transparent);
}

/* Ring de progression — couleur or */
body.theme-sablier-page .inv2-progress-ring__bg { stroke: rgba(201, 168, 118, 0.2); }
body.theme-sablier-page .inv2-progress-ring__fill { stroke: #FFE9B8; filter: drop-shadow(0 0 6px rgba(255, 233, 184, 0.5)); }
body.theme-sablier-page .inv2-progress-ring__text {
    color: #FFE9B8;
    font-family: var(--sb-font-numeric);
    font-weight: 500;
}

/* Social proof — Cormorant italique amber */
body.theme-sablier-page .inv2-social-proof {
    font-family: var(--sb-font-display);
    font-style: italic;
    color: color-mix(in srgb, #FAF6EE 80%, transparent);
}
body.theme-sablier-page .inv2-social-proof i { color: #C9A876; }
body.theme-sablier-page .inv2-social-proof__count {
    color: #FFE9B8;
    font-weight: 600;
}

/* Greeting guest — verre soufflé */
body.theme-sablier-page .inv-guest-greeting {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border: 1px solid var(--sb-glass-border);
    border-radius: 14px;
    padding: 14px 22px;
    color: #FAF6EE;
    font-family: var(--sb-font-display);
    font-style: italic;
}
body.theme-sablier-page .inv-guest-greeting strong { color: #FFE9B8; font-weight: 600; }

/* Carte event — flacon verre soufflé doré */
body.theme-sablier-page .inv-event {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
            backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--sb-glass-border);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        inset 0 -1px 0 rgba(92, 75, 54, 0.25),
        0 14px 36px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
    padding: 24px;
}
body.theme-sablier-page .inv-event__badge {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    font-family: var(--sb-font-numeric);
    font-weight: 500;
    border-radius: 999px;
    padding: 4px 12px;
    border: none;
}
body.theme-sablier-page .inv-event__name {
    font-family: var(--sb-font-display);
    font-style: italic;
    color: #FAF6EE;
    font-size: clamp(1.1rem, 3vw, 1.3rem);
}
body.theme-sablier-page .inv-event__question {
    font-family: var(--sb-font-display);
    font-style: italic;
    color: color-mix(in srgb, #FAF6EE 80%, transparent);
    margin: 12px 0;
}

/* Réponses — 3 gouttes d'or 3D Oui/Peut-être/Non */
body.theme-sablier-page .inv-responses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}
body.theme-sablier-page .inv-resp-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    /* Forme de goutte */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border: 1.5px solid var(--sb-glass-border);
    cursor: pointer;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.4s var(--sb-ease-flow);
    isolation: isolate;
}

/* OUI — goutte qui se solidifie en or pur au :checked */
body.theme-sablier-page .inv-resp-btn--yes {
    background: rgba(255, 233, 184, 0.08);
    color: #FFE9B8;
}
body.theme-sablier-page .inv-resp-btn--yes:hover {
    background: rgba(255, 233, 184, 0.18);
    border-color: #FFE9B8;
    transform: translateY(-2px);
}
body.theme-sablier-page .inv-resp-btn--yes.selected {
    background: radial-gradient(ellipse at 35% 30%, #FFE9B8 0%, #C9A876 55%, #5C4B36 100%);
    color: #FAF6EE;
    border-color: #FFE9B8;
    transform: scale(1.15);
    box-shadow:
        inset 0 -4px 8px rgba(255, 233, 184, 0.6),
        0 0 28px rgba(255, 233, 184, 0.6),
        0 8px 22px rgba(201, 168, 118, 0.5);
    text-shadow: 0 1px 2px rgba(92, 75, 54, 0.6);
}

/* PEUT-ÊTRE — goutte translucide ambre, pulse subtle.
   Contraste renforcé sur fond bordeaux mariage (texte ambre vif, border or
   visible, fond plus opaque) pour atteindre WCAG AA ≥ 4.5:1. */
body.theme-sablier-page .inv-resp-btn--maybe {
    background: rgba(201, 168, 118, 0.22);
    color: #FFE9B8;
    border-color: color-mix(in srgb, #C9A876 55%, transparent);
}
body.theme-sablier-page .inv-resp-btn--maybe:hover {
    background: rgba(201, 168, 118, 0.35);
    border-color: #FFE9B8;
    transform: translateY(-2px);
}
body.theme-sablier-page .inv-resp-btn--maybe.selected {
    background: rgba(201, 168, 118, 0.35);
    border-color: #C9A876;
    transform: scale(1.15);
    box-shadow:
        inset 0 -3px 6px rgba(255, 233, 184, 0.25),
        0 0 22px rgba(201, 168, 118, 0.45);
    animation: sb-rsvp-maybe-pulse 2.5s ease-in-out infinite;
}
@keyframes sb-rsvp-maybe-pulse {
    0%, 100% { box-shadow: inset 0 -3px 6px rgba(255, 233, 184, 0.25), 0 0 22px rgba(201, 168, 118, 0.45); }
    50%      { box-shadow: inset 0 -3px 6px rgba(255, 233, 184, 0.35), 0 0 34px rgba(201, 168, 118, 0.65); }
}

/* NON — goutte plus sobre que les autres, mais lisible sans effort.
   Le texte reste pleinement opaque (lin crème), la border or à 40 %
   garantit la délimitation visuelle, le fond terre cuite à 55 % offre
   un contraste WCAG AA. Réservé l'effet « évaporation » au :selected. */
body.theme-sablier-page .inv-resp-btn--no {
    background: rgba(92, 75, 54, 0.55);
    color: #FAF6EE;
    border-color: color-mix(in srgb, #C9A876 40%, transparent);
}
body.theme-sablier-page .inv-resp-btn--no:hover {
    background: rgba(92, 75, 54, 0.72);
    border-color: #C9A876;
    transform: translateY(-2px);
}
body.theme-sablier-page .inv-resp-btn--no.selected {
    background: rgba(92, 75, 54, 0.55);
    border-color: rgba(201, 168, 118, 0.5);
    opacity: 0.7;
    transform: scale(1.05);
    filter: blur(0.5px);
}

/* Aprés les questions — bloc identité + message en verre soufflé */
body.theme-sablier-page .inv2-after-questions {
    background: var(--sb-glass-bg);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border: 1px solid var(--sb-glass-border);
    border-radius: 18px;
    padding: 28px;
    margin-top: 24px;
}
body.theme-sablier-page .inv2-identity-section,
body.theme-sablier-page .inv2-message-section { margin-bottom: 24px; }
body.theme-sablier-page .inv2-identity-icon,
body.theme-sablier-page .inv2-message-icon {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
}
body.theme-sablier-page .inv2-identity-title,
body.theme-sablier-page .inv2-message-title {
    font-family: var(--sb-font-display);
    font-style: italic;
    color: #FFE9B8;
}
body.theme-sablier-page .inv2-identity-subtitle,
body.theme-sablier-page .inv2-message-subtitle {
    font-family: var(--sb-font-display);
    font-style: italic;
    color: color-mix(in srgb, #FAF6EE 75%, transparent);
}
body.theme-sablier-page .inv-input,
body.theme-sablier-page .inv2-textarea {
    background: rgba(255, 233, 184, 0.06);
    border: 1px solid var(--sb-glass-border);
    color: #FAF6EE;
    font-family: var(--sb-font-body);
}
body.theme-sablier-page .inv-input:focus,
body.theme-sablier-page .inv2-textarea:focus {
    background: rgba(255, 233, 184, 0.12);
    border-color: #FFE9B8;
    box-shadow: 0 0 0 3px rgba(255, 233, 184, 0.2);
    outline: none;
}
body.theme-sablier-page .inv2-identity-help {
    color: color-mix(in srgb, #C9A876 75%, transparent);
    font-style: italic;
}

/* Submit — bouton or massif */
body.theme-sablier-page .inv-submit-btn {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    border: 1px solid #FFE9B8;
    font-family: var(--sb-font-body);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 14px 32px;
    box-shadow: 0 12px 32px rgba(201, 168, 118, 0.5);
    transition: all 0.35s var(--sb-ease-flow);
}
body.theme-sablier-page .inv-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(255, 233, 184, 0.6);
}

/* Récap — verre soufflé */
body.theme-sablier-page .inv-summary {
    background: var(--sb-glass-bg-strong);
    border: 1px solid var(--sb-glass-border);
    border-radius: 18px;
    padding: 28px;
}
body.theme-sablier-page .inv-summary h3 {
    font-family: var(--sb-font-display);
    font-style: italic;
    color: #FFE9B8;
}

/* ═════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion (Phase 4)
   ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.theme-sablier-page .sb-programme__drop-glow,
    body.theme-sablier-page .sb-cal__btn-sand--top,
    body.theme-sablier-page .sb-cal__btn-sand--bot,
    body.theme-sablier-page .inv-resp-btn,
    body.theme-sablier-page .inv-resp-btn--maybe.selected {
        animation: none !important;
        transition: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PHASE 5 — L'HORLOGE DU SABLE (intégrée au hero)
   Compteur live JOURS / HEURES / MINUTES / SECONDES affiché juste après le
   CTA du hero. Update temps réel chaque seconde. 4 capsules verre soufflé
   doré, caption poétique adaptative, sceau Jour J caché jusqu'à zéro.

   Modifier .sb-instant--inline : pas de padding section, pas de background
   autonome (hérite du hero), capsules compactes pour intégration harmonieuse.
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .sb-instant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
}

/* Variante inline (dans le hero) — compact, pas de background, pas de halo */
body.theme-sablier-page .sb-instant--inline {
    width: 100%;
    max-width: 600px;
    margin-top: clamp(8px, 1.5vh, 16px);
    gap: clamp(8px, 1.5vh, 14px);
    z-index: 3; /* Au-dessus de l'ambient hero, sous la photo */
}

/* ── Goutte d'or qui tombe à chaque seconde (signature Sablier) ──────── */
.sb-instant__pulse {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 32px;
    margin: 0 auto;
}
.sb-instant__pulse-drop {
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 12px;
    margin-left: -4px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    background: radial-gradient(ellipse at 35% 30%, #FFE9B8 0%, #C9A876 70%, #5C4B36 100%);
    box-shadow:
        0 0 12px rgba(255, 233, 184, 0.7),
        inset 0 -2px 3px rgba(255, 233, 184, 0.5);
    animation: sb-instant-pulse-drop 1s ease-in infinite;
}
@keyframes sb-instant-pulse-drop {
    0%   { transform: translateY(0)   scale(0.85); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(22px) scale(1); opacity: 0; }
}
/* Anneaux d'impact à la chute (en bas de la goutte) */
.sb-instant__pulse-ring {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    border: 1.5px solid #C9A876;
    opacity: 0;
    transform: scale(0.5);
    animation: sb-instant-pulse-ring 1s ease-out infinite;
}
.sb-instant__pulse-ring--late { animation-delay: 0.15s; border-color: #FFE9B8; }
@keyframes sb-instant-pulse-ring {
    0%   { opacity: 0; transform: scale(0.4); }
    20%  { opacity: 0.8; }
    100% { opacity: 0; transform: scale(2.5); }
}

/* ── L'Horloge — flex desktop (4 capsules + 3 séparateurs sur UNE ligne)
   → grid 2x2 mobile/tablette (≤ 720px). nowrap force la single line. */
.sb-instant__clock {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vw, 14px);
    flex-wrap: nowrap;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

/* Capsule chiffre — verre soufflé doré, forme organique signature */
.sb-instant__unit {
    position: relative;
    flex: 0 0 auto;
    min-width: clamp(64px, 14vw, 96px);
    padding: clamp(12px, 2vw, 18px) clamp(10px, 1.8vw, 14px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* Forme organique signature Sablier (légère asymétrie verticale) */
    border-radius: 22px 22px 28px 28px / 22px 22px 32px 32px;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, #C9A876 22%, transparent) 0%,
            color-mix(in srgb, #5C4B36 60%, var(--tch-primary)) 100%
        );
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
            backdrop-filter: blur(16px) saturate(1.4);
    border: 1.5px solid var(--sb-glass-border);
    box-shadow:
        inset 0 2px 0 var(--sb-glass-shine),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 16px 36px rgba(0, 0, 0, 0.45),
        0 0 26px rgba(201, 168, 118, 0.18);
}
/* Reflet brillant qui parcourt la capsule (cycle 6s) */
.sb-instant__unit-glass {
    position: absolute;
    top: -50%;
    left: -30%;
    width: 160%;
    height: 60%;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 233, 184, 0.35) 0%,
        rgba(255, 233, 184, 0.08) 40%,
        transparent 75%
    );
    filter: blur(6px);
    pointer-events: none;
}

/* Chiffre — Bodoni Moda massif gradient or */
.sb-instant__unit-value {
    position: relative;
    z-index: 2;
    font-family: var(--sb-font-numeric);
    font-weight: 500;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    line-height: 1;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 55%, #FFE9B8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 22px rgba(201, 168, 118, 0.35);
    letter-spacing: -0.02em;
    transition: transform 0.4s var(--sb-ease-spring);
    font-variant-numeric: tabular-nums;
}
/* Animation au changement de valeur — pulse scale + glow */
.sb-instant__unit-value.is-changing {
    animation: sb-instant-tick 0.5s var(--sb-ease-spring);
}
@keyframes sb-instant-tick {
    0%   { transform: scale(1)    rotateX(0); }
    40%  { transform: scale(1.18) rotateX(-12deg); }
    100% { transform: scale(1)    rotateX(0); }
}

/* Label — uppercase tiny letterspaced or */
.sb-instant__unit-label {
    position: relative;
    z-index: 2;
    font-family: var(--sb-font-body);
    font-size: clamp(0.55rem, 1.3vw, 0.65rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, #C9A876 90%, transparent);
}

/* Séparateurs losange entre les capsules — pulse synchronisé */
.sb-instant__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}
.sb-instant__separator-diamond {
    font-size: 0.55rem;
    color: #FFE9B8;
    text-shadow: 0 0 8px rgba(255, 233, 184, 0.7), 0 0 14px rgba(201, 168, 118, 0.5);
    animation: sb-instant-sep 2s ease-in-out infinite;
}
@keyframes sb-instant-sep {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* Caption poétique sous le compteur */
.sb-instant__caption {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 480px;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: clamp(0.92rem, 2.2vw, 1.1rem);
    line-height: 1.5;
    text-align: center;
    color: color-mix(in srgb, #FAF6EE 88%, transparent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.sb-instant__caption strong {
    font-weight: 500;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    text-shadow: 0 0 20px rgba(255, 233, 184, 0.4);
}
.sb-instant__caption-loading {
    opacity: 0.4;
    font-size: 1.4rem;
    color: #C9A876;
    -webkit-text-fill-color: #C9A876;
    background: none;
}

/* ── Sceau Jour J — révélé quand le compte à rebours touche zéro ─────── */
.sb-instant__seal {
    /* Hors du flow tant que caché — ne pousse pas le contenu du hero */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 10;
    width: clamp(180px, 40vw, 260px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
        circle,
        rgba(255, 233, 184, 0.25) 0%,
        rgba(201, 168, 118, 0.1) 45%,
        transparent 75%
    );
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s var(--sb-ease-flow), transform 1.2s var(--sb-ease-spring);
    pointer-events: none;
}
.sb-instant__seal.is-revealed {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
.sb-instant__seal-ring {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 2px solid #FFE9B8;
    box-shadow: 0 0 30px rgba(255, 233, 184, 0.6), inset 0 0 24px rgba(255, 233, 184, 0.3);
    animation: sb-instant-seal-rotate 18s linear infinite;
}
.sb-instant__seal-ring--outer {
    inset: 5%;
    border-color: rgba(201, 168, 118, 0.6);
    border-style: dashed;
    animation-duration: 30s;
    animation-direction: reverse;
}
@keyframes sb-instant-seal-rotate {
    to { transform: rotate(360deg); }
}
.sb-instant__seal-text {
    position: relative;
    z-index: 3;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    line-height: 1.2;
    text-align: center;
    color: #FFE9B8;
    text-shadow: 0 0 16px rgba(255, 233, 184, 0.8);
}
.sb-instant__seal-text em {
    font-style: italic;
    font-size: 1.4em;
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Quand le sceau est révélé, on masque l'horloge et le pulse */
.sb-instant.is-day-zero .sb-instant__clock,
.sb-instant.is-day-zero .sb-instant__pulse {
    display: none;
}

/* ── Mobile/Tablette (≤ 720px) — grid 2x2 pour l'horloge, séparateurs masqués.
   Bascule plus tôt que 540 pour éviter le squeeze des 4 capsules + 3 séparateurs
   sur viewports intermédiaires (smartphones grands, tablettes portrait). */
@media (max-width: 720px) {
    .sb-instant__clock {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 380px;
    }
    .sb-instant__separator {
        display: none;
    }
    .sb-instant__unit {
        min-width: 0;
        width: 100%;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   WIDGETS FIXES — Verre soufflé doré pour tous les éléments flottants
   - .inv-bg-music    : flacon verre soufflé doré (le « joyau sonore »)
   - .inv-share-whatsapp : bulle ambrée
   - .inv-scroll-nav   : flèches sculptées verre liquide
   - .inv-progress     : barre = niveau de sable
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   « LA GOUTTE SONORE » — Widget musique signature Sablier
   Forme : goutte d'or verticale (pointu haut, large bas) — pas un cercle,
   l'identité Sablier pure. Position : bottom-left desktop + mobile (loin
   de la bannière démo). Sable doré qui descend en pluie quand la musique
   joue (réutilise .inv-bg-music__particles avec animation reversed).
   ───────────────────────────────────────────────────────────────────────── */

/* Position bottom-left (au lieu du top-right par défaut) — desktop + mobile.
   z-index moins haut que la bannière démo top:0 pour ne pas la chevaucher. */
body.theme-sablier-page .inv-bg-music {
    top: auto !important;
    right: auto !important;
    bottom: clamp(20px, 3vh, 32px) !important;
    left: clamp(16px, 3vw, 28px) !important;
}

/* Le bouton lui-même — forme de goutte d'or verticale (signature Sablier) */
body.theme-sablier-page .inv-bg-music__btn {
    width: 56px !important;
    height: 76px !important;
    /* Forme goutte authentique : pointu en haut, large/arrondi en bas */
    border-radius: 50% 50% 50% 50% / 38% 38% 62% 62% !important;
    background:
        radial-gradient(
            ellipse 70% 50% at 50% 30%,
            #FFE9B8 0%,
            #C9A876 50%,
            #5C4B36 100%
        ) !important;
    border: 1.5px solid rgba(255, 233, 184, 0.85) !important;
    box-shadow:
        inset 0 4px 0 rgba(255, 255, 255, 0.45),
        inset 0 -6px 12px rgba(92, 75, 54, 0.6),
        0 14px 30px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(255, 233, 184, 0.35) !important;
    overflow: visible !important;
    transition: transform 0.4s var(--sb-ease-flow), box-shadow 0.4s var(--sb-ease-flow);
}
body.theme-sablier-page .inv-bg-music__btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        inset 0 4px 0 rgba(255, 255, 255, 0.55),
        inset 0 -6px 12px rgba(92, 75, 54, 0.6),
        0 20px 40px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(255, 233, 184, 0.55) !important;
}

/* ── État REPOS / MUTED — figé et grisé (AUCUNE animation) ────────────
   Par défaut : aucune musique en cours OU son coupé → tout est figé,
   couleurs désaturées. L'utilisateur comprend immédiatement « rien ne
   joue » sans aucun signal trompeur. */
body.theme-sablier-page .inv-bg-music__btn {
    filter: saturate(0.5) brightness(0.88);
    animation: none;
}

/* État MUTED — son explicitement coupé : grisé renforcé + opacity */
body.theme-sablier-page .inv-bg-music--muted .inv-bg-music__btn {
    filter: saturate(0.35) brightness(0.78);
    opacity: 0.78;
}

/* ── État PLAYING (et NOT MUTED) — couleurs vives + respiration ───────
   :not(.inv-bg-music--muted) crucial : si l'utilisateur coupe le son
   pendant la lecture, le widget retombe instantanément en grisé/figé
   même si la classe --playing reste posée par le JS. */
body.theme-sablier-page .inv-bg-music--playing:not(.inv-bg-music--muted) .inv-bg-music__btn {
    filter: saturate(1.1) brightness(1);
    animation: sb-music-pulse 1.4s ease-in-out infinite;
}
@keyframes sb-music-pulse {
    0%, 100% { transform: scale(1)    rotate(0); }
    50%      { transform: scale(1.06) rotate(0); }
}

/* ── L'icône fa-music par défaut est MASQUÉE — remplacée par l'equalizer
   3 barres qui devient l'identité principale du widget (signal audio
   universel, jamais utilisé sur d'autres widgets web).
   Le centre conserve son layout pour positionner les barres. */
body.theme-sablier-page .inv-bg-music__center {
    position: relative !important;
    z-index: 3 !important;
    width: 32px;
    height: 22px;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}
body.theme-sablier-page .inv-bg-music__center i {
    display: none !important;
}

/* Suppression des éléments circulaires (aura, ring, progress, shine, ripple)
   — la goutte + l'equalizer se suffisent. .__grooves récupéré pour barre 2. */
body.theme-sablier-page .inv-bg-music__progress,
body.theme-sablier-page .inv-bg-music__ring,
body.theme-sablier-page .inv-bg-music__aura,
body.theme-sablier-page .inv-bg-music__shine,
body.theme-sablier-page .inv-bg-music__ripple {
    display: none !important;
}
body.theme-sablier-page .inv-bg-music__jewel {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ── EQUALIZER 3 BARRES — l'identité signature, toujours visible.
   Au repos : barres harmoniques calmes (heights 8/14/10), breathing subtle.
   Au play : barres dansent en désync (animations 0.45/0.55/0.6s).
   Construits via .__center::before (barre 1) + .__grooves (barre 2 récupéré)
   + .__center::after (barre 3). */
body.theme-sablier-page .inv-bg-music__center::before,
body.theme-sablier-page .inv-bg-music__center::after,
body.theme-sablier-page .inv-bg-music__grooves {
    content: "";
    display: block !important;
    position: static !important;
    width: 4px !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #FFE9B8 0%, #C9A876 100%) !important;
    background-image: linear-gradient(180deg, #FFE9B8 0%, #C9A876 100%) !important;
    box-shadow:
        0 0 6px rgba(255, 233, 184, 0.7),
        inset 0 -1px 0 rgba(92, 75, 54, 0.4) !important;
    transform-origin: center bottom;
    transition: height 0.4s var(--sb-ease-flow);
}

/* Heights au REPOS — harmoniques équilibrés (signal "audio prêt") */
body.theme-sablier-page .inv-bg-music__center::before { height: 8px !important; }
body.theme-sablier-page .inv-bg-music__grooves        { height: 14px !important; }
body.theme-sablier-page .inv-bg-music__center::after  { height: 10px !important; }

/* AUCUNE animation au repos / muted — barres figées (l'utilisateur
   comprend immédiatement que rien ne joue). La désaturation du __btn
   parent grise déjà les barres par héritage du filter. */
body.theme-sablier-page .inv-bg-music__center::before,
body.theme-sablier-page .inv-bg-music__center::after,
body.theme-sablier-page .inv-bg-music__grooves {
    animation: none;
}

/* Au PLAY (et NOT MUTED) : barres dancent comme un vrai equalizer audio.
   3 animations désynchronisées (graves/mediums/aigus). */
body.theme-sablier-page .inv-bg-music--playing:not(.inv-bg-music--muted) .inv-bg-music__center::before {
    animation: sb-music-eq-dance-low 0.6s ease-in-out infinite alternate !important;
}
body.theme-sablier-page .inv-bg-music--playing:not(.inv-bg-music--muted) .inv-bg-music__grooves {
    animation: sb-music-eq-dance-high 0.45s ease-in-out infinite alternate !important;
    animation-delay: 0.12s !important;
}
body.theme-sablier-page .inv-bg-music--playing:not(.inv-bg-music--muted) .inv-bg-music__center::after {
    animation: sb-music-eq-dance-mid 0.55s ease-in-out infinite alternate !important;
    animation-delay: 0.28s !important;
}
@keyframes sb-music-eq-dance-low {
    0%   { transform: scaleY(0.4); }
    100% { transform: scaleY(2.2); }
}
@keyframes sb-music-eq-dance-mid {
    0%   { transform: scaleY(0.5); }
    100% { transform: scaleY(1.9); }
}
@keyframes sb-music-eq-dance-high {
    0%   { transform: scaleY(0.3); }
    100% { transform: scaleY(1.6); }
}
/* Panel — s'ouvre vers la droite (le widget est en bas-gauche).
   Forme organique signature Sablier (border-radius asymétrique). */
body.theme-sablier-page .inv-bg-music__panel {
    background: var(--sb-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
            backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--sb-glass-border) !important;
    color: #FAF6EE;
    border-radius: 22px 28px 28px 22px / 24px 28px 28px 24px !important;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(201, 168, 118, 0.2);
}
body.theme-sablier-page .inv-bg-music__title {
    color: #FFE9B8;
    font-family: var(--sb-font-display);
    font-style: italic;
}
body.theme-sablier-page .inv-bg-music__artist,
body.theme-sablier-page .inv-bg-music__eyebrow,
body.theme-sablier-page .inv-bg-music__time {
    color: color-mix(in srgb, #C9A876 90%, transparent);
}
body.theme-sablier-page .inv-bg-music__fill {
    background: linear-gradient(90deg, #C9A876 0%, #FFE9B8 100%);
}
body.theme-sablier-page .inv-bg-music__thumb {
    background: #FFE9B8;
    box-shadow: 0 0 10px rgba(255, 233, 184, 0.6);
}
/* Particules — petits grains de sable doré qui montent autour de la goutte
   quand la musique joue (réutilise les 6 spans .inv-bg-music__particles). */
body.theme-sablier-page .inv-bg-music__particles {
    z-index: 0 !important;
}
body.theme-sablier-page .inv-bg-music__particles span {
    background: radial-gradient(ellipse at 30% 30%, #FFE9B8 0%, #C9A876 70%, transparent 100%) !important;
    box-shadow: 0 0 8px rgba(255, 233, 184, 0.7) !important;
    width: 4px !important;
    height: 6px !important;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important;
}
body.theme-sablier-page .inv-bg-music__visualizer span {
    background: linear-gradient(180deg, #FFE9B8 0%, #C9A876 100%);
}
body.theme-sablier-page .inv-bg-music__close,
body.theme-sablier-page .inv-bg-music__mute-btn {
    color: #FFE9B8;
    background: rgba(255, 233, 184, 0.1);
    border-color: var(--sb-glass-border);
}
body.theme-sablier-page .inv-bg-music__mute-btn:hover {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
}

/* ── WhatsApp share — Bulle de verre ambré ─────────────────────────────── */
body.theme-sablier-page .inv-share-whatsapp {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    border: 1.5px solid var(--sb-glass-border);
    color: #FFE9B8;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 10px 24px rgba(0, 0, 0, 0.45);
    transition: all 0.4s var(--sb-ease-flow);
}
body.theme-sablier-page .inv-share-whatsapp:hover {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    border-color: #FFE9B8;
    box-shadow:
        0 14px 32px rgba(255, 233, 184, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ── Scroll nav (haut/bas) — Flèches verre liquide ─────────────────────── */
body.theme-sablier-page .inv-scroll-nav__btn {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border: 1.5px solid var(--sb-glass-border);
    color: #FFE9B8;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 6px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.3s var(--sb-ease-flow);
}
body.theme-sablier-page .inv-scroll-nav__btn:hover {
    background: linear-gradient(135deg, #FFE9B8 0%, #C9A876 100%);
    color: #5C4B36;
    transform: translateY(-2px);
}

/* ── Progress bar (top) — Niveau de sable qui se remplit ───────────────── */
body.theme-sablier-page .inv-progress {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border: 1px solid var(--sb-glass-border);
}
body.theme-sablier-page .inv-progress__bar {
    background: rgba(92, 75, 54, 0.3);
}
body.theme-sablier-page .inv-progress__fill {
    background: linear-gradient(90deg, #C9A876 0%, #FFE9B8 50%, #C9A876 100%);
    box-shadow: 0 0 8px rgba(255, 233, 184, 0.5);
}
body.theme-sablier-page .inv-progress__text {
    color: #FFE9B8;
    font-family: var(--sb-font-body);
}

/* ═════════════════════════════════════════════════════════════════════════════
   MESSAGES ÉMOTIONNELS — Toast en verre soufflé doré (centré bas)
   Override de .emotional-toast scoped body.theme-sablier-page.
   ═════════════════════════════════════════════════════════════════════════════ */

body.theme-sablier-page .emotional-toast__text {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
            backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid var(--sb-glass-border);
    color: #FAF6EE;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 12px 36px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(201, 168, 118, 0.25);
    /* Forme légèrement organique (subtile asymétrie verre soufflé) */
    border-radius: 50px 50px 50px 50px / 60% 60% 40% 40%;
}

/* Badge + Secret + Scroll-milestone — même grammaire verre soufflé doré */
body.theme-sablier-page .emotional-badge {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
            backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid var(--sb-glass-border);
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(201, 168, 118, 0.2);
}
body.theme-sablier-page .emotional-badge__text {
    color: #FFE9B8;
    font-family: var(--sb-font-display);
    font-style: italic;
    letter-spacing: 0.04em;
}
body.theme-sablier-page .emotional-secret__text {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(28px) saturate(1.7);
            backdrop-filter: blur(28px) saturate(1.7);
    border: 1px solid var(--sb-glass-border);
    color: #FFE9B8;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    box-shadow:
        inset 0 1px 0 var(--sb-glass-shine),
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(201, 168, 118, 0.4);
    border-radius: 50px 50px 50px 50px / 60% 60% 40% 40%;
}
body.theme-sablier-page .scroll-milestone-toast {
    background: var(--sb-glass-bg-strong);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
            backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid var(--sb-glass-border);
    color: #FFE9B8;
    font-family: var(--sb-font-display);
    font-style: italic;
}
body.theme-sablier-page .scroll-milestone-bar {
    background: linear-gradient(90deg, #FFE9B8, #C9A876);
}

/* ═════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — prefers-reduced-motion (Phase 5)
   ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.theme-sablier-page .sb-instant__particle,
    body.theme-sablier-page .sb-instant__pulse-drop,
    body.theme-sablier-page .sb-instant__pulse-ring,
    body.theme-sablier-page .sb-instant__unit-value,
    body.theme-sablier-page .sb-instant__separator-diamond,
    body.theme-sablier-page .sb-instant__seal,
    body.theme-sablier-page .sb-instant__seal-ring {
        animation: none !important;
        transition: none !important;
    }
}