/* ==========================================================
   WISHFLOW THEMES — ULTRA-DESIGN & SHAPE-AWARE
   Vitesse de transition, textures et gestion du format ROND
   ========================================================== */

/* Racine commune ultra-responsive */
.wf-card-preview {
    position: relative;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    min-height: 450px;
    box-sizing: border-box;
    border: none;
    color: #333;
}

/* GESTION DU FORMAT ROND (si sélectionné dans le dashboard) */
.wf-card-preview[style*="border-radius: 50%"],
.wf-card-preview.is-round {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
}

/* ==========================================================
   STANDARD THEMES (Textures & Subtilité)
   ========================================================== */

/* Thème Paper : Effet papier texturé avec une ombre subtile */
.theme-free-paper {
    background-color: #fdfdfa;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e8e8e3' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    box-shadow: 0 10px 30px -15px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 8px;
}

/* Pastel : Aura douce et néomorphisme léger */
.theme-free-pastel {
    background: linear-gradient(145deg, #ffffff, #f7f7f7);
    border-radius: 40px;
    box-shadow: 
        15px 15px 30px #d9d9d9, 
        -15px -15px 30px #ffffff,
        inset 0 0 80px rgba(255, 192, 203, 0.15);
}

/* Sky : Verre dépoli avec un cadre lumineux interne */
.theme-free-sky {
    background: rgba(224, 242, 254, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        0 8px 32px 0 rgba(31, 38, 135, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Mono : Noir & Blanc texturé */
.theme-free-mono {
    background-color: #fafafa;
    background-image: 
        linear-gradient(45deg, #000 1px, transparent 1px),
        linear-gradient(-45deg, #ccc 1px, transparent 1px);
    background-size: 30px 30px;
    filter: grayscale(100%);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1), inset 0 0 0 1px #ddd;
    color: #222;
}

/* ==========================================================
   GRATUITS (Thèmes offerts)
   ========================================================== */

/* Confettis : fond animé avec confettis colorés */
.theme-free-confetti {
    background-color: #fef9e7;
    background-image: 
        radial-gradient(circle at 10% 20%, #fbbf24 3px, transparent 3px),
        radial-gradient(circle at 30% 70%, #f87171 5px, transparent 5px),
        radial-gradient(circle at 70% 40%, #60a5fa 4px, transparent 4px),
        radial-gradient(circle at 85% 80%, #f472b6 6px, transparent 6px),
        radial-gradient(circle at 45% 90%, #fde047 4px, transparent 4px),
        radial-gradient(circle at 15% 50%, #4ade80 5px, transparent 5px),
        radial-gradient(circle at 60% 15%, #c084fc 6px, transparent 6px),
        radial-gradient(circle at 95% 30%, #fca5a5 4px, transparent 4px);
    background-size: 200px 200px, 250px 250px, 300px 300px, 350px 350px, 400px 400px, 450px 450px, 500px 500px, 550px 550px;
    background-position: 0 0;
    animation: confetti-move 40s linear infinite;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(255,255,240,0.6), 0 10px 25px -10px rgba(0,0,0,0.2);
}

@keyframes confetti-move {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 400px 400px, -300px 300px, 200px -200px, -400px -100px, 500px 200px, -200px 500px, 300px -300px, -500px -200px; }
}



/* ==========================================================
   COSMIC FUSION ULTRA — FIX TOTAL (Nom DB: theme-premium-cosmic)
   ========================================================== */

/* 1. On cible la classe EXACTE de la DB et on force le fond */
.theme_free_cosmic {
    background-color: #05040a !important;
    background-image: none !important; /* Supprime l'héritage blanc */
    color: #ffffff !important;
    border-radius: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 450px;
    z-index: 1;
}

/* 2. Nébuleuse tournante */
.theme-free-cosmic::before {
    content: "" !important;
    position: absolute !important;
    inset: -100% !important;
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(126, 34, 206, 0.5) 0%, transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(37, 99, 235, 0.5) 0%, transparent 30%),
        radial-gradient(circle at 50% 40%, rgba(219, 39, 119, 0.4) 0%, transparent 40%) !important;
    filter: blur(60px);
    animation: cosmic-rotation 25s linear infinite !important;
    z-index: -3 !important;
    pointer-events: none;
}

/* 3. Étoiles scintillantes */
.theme-free-cosmic::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: 
        radial-gradient(1px 1px at 10% 10%, white, transparent),
        radial-gradient(1.5px 1.5px at 20% 50%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90% 90%, white, transparent),
        radial-gradient(2px 2px at 40% 80%, white, transparent) !important;
    background-size: 250px 250px !important;
    animation: stars-twinkle 4s ease-in-out infinite alternate !important;
    opacity: 0.4 !important;
    z-index: -2 !important;
    pointer-events: none;
}

/* 4. Effet de vitre (S'applique au contenu direct pour le mode FREE) */
.theme-free-cosmic > *:not(::before):not(::after) {
    position: relative;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 32px !important;
    padding: 30px !important;
    width: 85% !important;
    z-index: 5 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Animations */
@keyframes cosmic-rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes stars-twinkle { 0% { opacity: 0.2; } 100% { opacity: 0.6; } }

/* Responsive Mobile */
@media (max-width: 768px) {
    .theme-premium-cosmic { min-height: 380px !important; border-radius: 25px !important; }
    .theme-premium-cosmic > *:not(::before):not(::after) { width: 95% !important; padding: 20px !important; }
}

/* ==========================================================
   MEDIUM THEMES (Folie visuelle & Cadres travaillés)
   ========================================================== */

/* Modern : Neumorphisme sombre intense et futuriste */
.theme-modern {
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 30px;
    box-shadow: 
        10px 10px 25px #1a222e, 
        -10px -10px 25px #243040,
        inset 1px 1px 2px #243040,
        inset -1px -1px 2px #1a222e;
}

/* Floral : Version Portrait avec 12 fleurs animées */
.theme-floral {
    background-color: #fff7f9 !important;
    position: relative;
    overflow: hidden; /* Empêche les fleurs de sortir du cadre */
    border-radius: 20px !important;
    border: 8px solid #ffffff !important;
    box-shadow: 0 20px 50px rgba(219, 39, 119, 0.1) !important;
    z-index: 1;
}

/* Couche principale : 11 fleurs (1 source + 10 ombres) */
.theme-floral::before {
    content: "🌸";
    position: absolute;
    font-size: 40px;
    top: 10%; 
    left: 15%;
    animation: float-flower 10s ease-in-out infinite alternate;
    opacity: 0.5;
    z-index: -1;
    /* On définit les 10 autres fleurs ici par leurs coordonnées (X Y) */
    text-shadow: 
        250px 50px 0 rgba(255,182,193,0.5), 
        50px 300px 0 rgba(255,182,193,0.5),
        200px 350px 0 rgba(255,182,193,0.5),
        120px 180px 0 rgba(255,182,193,0.5),
        280px 220px 0 rgba(255,182,193,0.5),
        40px 100px 0 rgba(255,182,193,0.4),
        300px 400px 0 rgba(255,182,193,0.4),
        180px 20px 0 rgba(255,182,193,0.4),
        10px 450px 0 rgba(255,182,193,0.4),
        320px 120px 0 rgba(255,182,193,0.4);
}

/* 12ème fleur : Une fleur différente qui bouge à contre-sens */
.theme-floral::after {
    content: "🌺";
    position: absolute;
    font-size: 35px;
    bottom: 15%; 
    right: 20%;
    animation: float-flower 15s ease-in-out infinite reverse;
    opacity: 0.4;
    z-index: -1;
}


/* Nature : Forme organique "Blob" animée */
.theme-nature {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    box-shadow: inset 5px 5px 25px rgba(34, 197, 94, 0.1);
    animation: blob-morph 15s infinite;
}

@keyframes blob-morph {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Gold : Cadre miroir doré avec effet de brillance */
.theme-gold {
    background: white;
    border-radius: 12px;
    position: relative;
}

.theme-gold::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 5px;
    background: linear-gradient(110deg, #d4af37, #fdfc47, #b8860b, #fdfc47, #d4af37);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gold-shine 4s infinite;
}

@keyframes gold-shine {
    to { background-position: -200% 0; }
}

/* Sobre & Solennel : élégance discrète, texture veloutée */
.theme-solemn {
    background: #2c2c2c;
    background-image: radial-gradient(circle at 30% 40%, rgba(200, 180, 140, 0.1) 0%, transparent 40%),
                      repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 6px);
    color: #e0dcd0;
    border-radius: 8px;
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(200, 180, 140, 0.3);
    border: none;
    position: relative;
}

.theme-solemn::after {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid rgba(200, 180, 140, 0.2);
    border-radius: inherit;
    pointer-events: none;
}


/* Aliases pour la catégorisation (sans modifier les styles) :
   - Géométrique  -> .theme-geometric (alias de .theme-premium-decoupe)
   - Éthéré       -> .theme-ethereal  (alias de .theme-premium-ethereal)
   - Marbre       -> .theme-marble    (alias de .theme-premium-marble)
*/
/* ==========================================================
   PREMIUM THEMES (Effets "WAOUH")
   ========================================================== */

/* Art Deco : Géométrie animée et cadre métallique */
.theme-premium-artdeco {
    background-color: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    position: relative;
    box-shadow: inset 0 0 0 8px #0f172a;
}

.theme-premium-artdeco::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background-image:
        linear-gradient(45deg, #c0a062 1px, transparent 1px),
        linear-gradient(-45deg, #c0a062 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.15;
    animation: artdeco-lines 10s linear infinite;
}

@keyframes artdeco-lines {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

/* Marble : Texture marbre réaliste avec veines */
.theme-premium-marble, .theme-premium-marble {
    background: #f8f8f5 !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    /* Effet de profondeur 3D */
    box-shadow: 
        0 30px 60px -12px rgba(50, 50, 50, 0.2),
        inset 0 0 100px rgba(255,255,255,0.8) !important;
}

/* Veines de marbre dynamiques */
.theme-premium-marble::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, 
        transparent 45%, 
        rgba(192, 184, 168, 0.2) 48%, 
        rgba(142, 134, 118, 0.3) 50%, 
        transparent 52%);
    background-size: 300% 300%;
    animation: marble-vein 15s ease-in-out infinite;
    z-index: 0;
}

@keyframes marble-vein {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* Velvet : Profondeur radiale avec grain texturé */
.theme-premium-velvet {
    background: radial-gradient(circle at 50% 50%, #be123c, #4c0519);
    color: white;
    position: relative;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 25px 50px -12px rgba(0,0,0,0.5);
}

.theme-premium-velvet::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Galaxy : Nébuleuse animée et interactive */
.theme-premium-galaxy {
    background: #000;
    color: white;
    border-radius: 20px;
    background-image: 
        radial-gradient(circle at 20% 30%, #4338ca 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, #7e22ce 0%, transparent 40%),
        url("https://www.transparenttextures.com/patterns/stardust.png");
    animation: galaxy-drift 30s infinite alternate;
}

@keyframes galaxy-drift {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 100px 50px, -100px -50px, 0 0; }
}

/* Frame : Cadre musée avec passe-partout et ombre réaliste */
.theme-premium-frame {
    background: #f5f5f5;
    border: 25px solid #281a14;
    border-radius: 4px;
    box-shadow: 
        inset 0 0 0 1px #e0e0e0,
        0 50px 100px -20px rgba(0,0,0,0.6);
    padding: 2rem;
}

/* Neon Pulse : néon vibrant avec animation de pulsation */
.theme-premium-neon {
    background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
    color: #fff;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.6), inset 0 0 20px rgba(255,255,255,0.2);
    animation: neon-pulse 3s infinite alternate;
}

@keyframes neon-pulse {
    0% { box-shadow: 0 0 20px #8a2be2, 0 0 40px #4b0082; }
    100% { box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffff; }
}

.theme-premium-neon::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    border-radius: 22px;
    z-index: -1;
    animation: neon-border 4s linear infinite;
}

@keyframes neon-border {
    0% { filter: blur(5px); opacity: 0.5; }
    50% { filter: blur(10px); opacity: 1; }
    100% { filter: blur(5px); opacity: 0.5; }
}

/* Holographic : effet irisé / holographique */
.theme-premium-holographic {
    background: linear-gradient(135deg, 
        rgba(255,0,240,0.2), 
        rgba(0,255,255,0.2), 
        rgba(255,255,0,0.2), 
        rgba(0,255,128,0.2));
    background-size: 300% 300%;
    animation: hologram 8s ease infinite;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
    color: #111;
}

@keyframes hologram {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* Aurora : aurore boréale animée */
.theme-premium-aurora {
    background: #0b1a2e;
    position: relative;
    color: #e0f2fe;
    overflow: hidden;
}

.theme-premium-aurora::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(64, 224, 208, 0.6) 0%, transparent 30%),
                radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.6) 0%, transparent 40%),
                radial-gradient(circle at 10% 80%, rgba(255, 182, 193, 0.5) 0%, transparent 35%),
                radial-gradient(circle at 90% 70%, rgba(152, 251, 152, 0.5) 0%, transparent 30%);
    animation: aurora-wave 15s linear infinite;
    filter: blur(30px);
}

@keyframes aurora-wave {
    0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
    50% { transform: rotate(5deg) scale(1.1); opacity: 1; }
    100% { transform: rotate(0deg) scale(1); opacity: 0.8; }
}

/* Cyber Grid : grille cyberpunk avec glitch */
.theme-premium-cyber {
    background: #0d0f1c;
    color: #0ff;
    border: 2px solid #00ffff;
    box-shadow: 0 0 30px #00ffff80, inset 0 0 20px #00ffff40;
    background-image: 
        linear-gradient(rgba(0,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    position: relative;
    animation: cyber-glitch 5s infinite;
}

@keyframes cyber-glitch {
    0% { transform: translate(0); }
    1% { transform: translate(-2px, 2px); }
    2% { transform: translate(2px, -2px); }
    3% { transform: translate(0); }
    98% { transform: translate(0); }
    99% { transform: translate(3px, -1px); }
    100% { transform: translate(0); }
}

.theme-premium-cyber::after {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px dashed #0ff;
    opacity: 0.3;
    pointer-events: none;
}

/* Crystal : verre cristallin avec reflets */
.theme-premium-crystal {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2), inset 0 0 30px rgba(255,255,255,0.5);
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.theme-premium-crystal::before {
    content: '';
    position: absolute;
    top: -20%; left: -20%; width: 140%; height: 140%;
    background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.4) 0%, transparent 50%);
    animation: crystal-shine 8s infinite;
}

@keyframes crystal-shine {
    0% { transform: translate(0,0) rotate(0deg); opacity: 0.2; }
    50% { transform: translate(5%,5%) rotate(5deg); opacity: 0.5; }
    100% { transform: translate(0,0) rotate(0deg); opacity: 0.2; }
}

/* Inferno : lave en fusion animée */
.theme-premium-inferno {
    background: linear-gradient(145deg, #7f1d1d, #b45309, #d97706, #f59e0b);
    background-size: 200% 200%;
    animation: inferno-flow 10s ease infinite;
    color: #fffbeb;
    border: none;
    box-shadow: 0 30px 40px -15px #b91c1c, inset 0 0 30px #fbbf24;
}

@keyframes inferno-flow {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* Découpage Géométrique : fond avec triangles colorés, zone centrale blanche */
.theme-premium-decoupe,
.theme-geometric {

    background: linear-gradient(135deg, #f9c9b6 0%, #f4e0b0 50%, #b5d3e7 100%);
    position: relative;
    color: #2d3e4f;
    border-radius: 20px;
    overflow: hidden;
}

.theme-premium-decoupe::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(45deg, rgba(255,99,132,0.2) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(75,192,200,0.2) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,205,86,0.2) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(153,102,255,0.2) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    pointer-events: none;
}

.theme-premium-decoupe .wf-card-stack {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    border-radius: 30px;
    margin: 30px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Vortex : spirale en arrière-plan, contenu centré */
.theme-premium-vortex {
    background: radial-gradient(circle at 30% 40%, #c471ed, #f64f59);
    color: white;
    border-radius: 50% / 10%;
    overflow: hidden;
    position: relative;
}

.theme-premium-vortex::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: repeating-conic-gradient(from 0deg, #fff0 0deg 30deg, rgba(255,255,255,0.1) 30deg 60deg);
    animation: vortex-spin 12s linear infinite;
    pointer-events: none;
}

@keyframes vortex-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.theme-premium-vortex .wf-card-stack {
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    border-radius: 40px;
    margin: 20px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Broderie : cadre avec motifs de broderie, fond lin */
.theme-premium-broderie {
    background: #f9f3e9;
    background-image: radial-gradient(circle at 30% 40%, #e0d6c0 2px, transparent 2px), 
                      radial-gradient(circle at 70% 80%, #d4c5a0 2px, transparent 2px);
    background-size: 40px 40px;
    border: 20px solid transparent;
    border-image: repeating-linear-gradient(45deg, #b49a7a, #dac292 15px, #b49a7a 30px) 30 stretch;
    color: #4e3e2e;
}

.theme-premium-broderie .wf-card-stack {
    background: rgba(255, 250, 240, 0.9);
    border: 2px solid #c9b28b;
    border-radius: 30px;
    margin: 5px;
    padding: 20px;
    box-shadow: inset 0 0 20px #e3d6c5;
}

/* Livre Ancien : effet de page avec ombre et coin replié */
.theme-premium-livre {
    background: #ede7d9;
    background-image: linear-gradient(to right, #d1c6b0 1px, transparent 1px),
                      linear-gradient(to bottom, #d1c6b0 1px, transparent 1px);
    background-size: 30px 30px;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.2), inset -5px -5px 15px rgba(0,0,0,0.1);
    position: relative;
    color: #3b2e1e;
    border-radius: 4px 20px 20px 4px;
}

.theme-premium-livre::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 50px; height: 50px;
    background: linear-gradient(135deg, transparent 50%, #bba88a 50%);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.2);
    border-bottom-left-radius: 10px;
}

.theme-premium-livre .wf-card-stack {
    background: rgba(255,251,240,0.9);
    border: 1px solid #baa78b;
    border-radius: 4px;
    margin: 25px;
    padding: 20px;
    box-shadow: inset 0 0 15px #d6cbb8;
}

/* Fenêtre : cadre de fenêtre avec barreaux */
.theme-premium-fenetre {
    background: #b0c4de;
    background-image: linear-gradient(90deg, #2c3e50 2px, transparent 2px),
                      linear-gradient(0deg, #2c3e50 2px, transparent 2px);
    background-size: 50px 50px;
    border: 15px solid #5d3a1a;
    border-radius: 30px 10px 30px 10px;
    color: #2c3e50;
    position: relative;
}

.theme-premium-fenetre::after {
    content: '';
    position: absolute;
    top: 20px; left: 20px; right: 20px; bottom: 20px;
    border: 4px double #f0e68c;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.5;
}

.theme-premium-fenetre .wf-card-stack {
    background: rgba(255,255,240,0.8);
    backdrop-filter: blur(2px);
    margin: 35px;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 0 0 2px #f0e68c;
}

/* Mosaïque : assemblage de petits carreaux colorés, panneau central uni */
.theme-premium-mosaique {
    background: 
        linear-gradient(45deg, #ffcd94 12.5%, transparent 12.5%, transparent 25%, #b3d9ff 25%, #b3d9ff 37.5%, transparent 37.5%, transparent 50%),
        linear-gradient(45deg, #ffabab 12.5%, transparent 12.5%, transparent 25%, #c3e6cb 25%, #c3e6cb 37.5%, transparent 37.5%, transparent 50%);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    color: #1e2f4d;
}

.theme-premium-mosaique .wf-card-stack {
    background: rgba(255, 250, 240, 0.9);
    border: 8px solid #fff;
    border-radius: 40px;
    margin: 30px;
    padding: 20px;
    box-shadow: 0 0 0 4px #c0b7a9, 0 20px 30px -10px black;
}

/* Obsidian : Correction du sélecteur */
.theme-premium-obsidian {
    background: #050505;
    color: #fff;
    border: 2px solid #331100;
    box-shadow: 0 0 50px rgba(255, 68, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.theme-premium-obsidian::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(255, 40, 0, 0.1) 0%, transparent 50%);
    animation: obsidian-pulse 8s ease-in-out infinite alternate;
}


/* Ethereal : Effet verre givré irisé ultra-doux */
.theme-premium-ethereal,
.theme-ethereal {

    background: linear-gradient(135deg, rgba(255, 40, 0, 0.1) 0%, rgba(240,245,255,0.9) 100%);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50px;
    box-shadow: 0 20px 40px rgba(255, 40, 0, 0.1), inset 0 0 20px rgba(255,255,255,0.8);
    color: #445566;
}

.theme-premium-ethereal .wf-card-stack {
    background: rgba(255,255,255,0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

/* ==========================================================
   OPTIMISATIONS MOBILES
   ========================================================== */
@media (max-width: 768px) {
    .wf-card-preview {
        padding: 1.5rem;
        min-height: 380px;
    }
    .theme-premium-frame { 
        border-width: 15px; 
        padding: 1.5rem;
    }
    .wf-card-preview.is-round {
        padding: 2rem;
    }
}