/* ==============================================
   GAME THEMES - Décorations subtiles par thème
   ============================================== */

/* --- BASE STYLES --- */
.theme-gimmicks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.company-header-wrap {
    position: relative !important; /* Force le positionnement */
    z-index: 20 !important; /* Force au-dessus des gimmicks */
    overflow: visible !important; /* Laisse le ballon dépasser */
}

.company-header {
    position: relative !important;
    transition: all 0.3s ease;
    overflow: visible !important; /* Laisse le ballon sortir du cadre */
}

.theme-mascot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    z-index: 10;
}

.theme-mascot.left { left: 10px; }
.theme-mascot.right { right: 10px; }

.theme-mascot img {
    display: block;
    animation: theme-mascot-bounce 2s ease-in-out infinite;
}

@keyframes theme-mascot-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ==============================================
   HEADER DECORATIONS - Subtiles (bordure bas)
   ============================================== */

/* NOËL - Guirlande en haut du header (remplace la bordure cannes à sucre) */
body[data-game-theme="noel"] .company-header::after,
.game-preview-theme-wrapper[data-theme="noel"] .company-header::after {
    content: none; /* plus de bordure cannes, on utilise la guirlande */
}

/* Header avec guirlande - comme les autres thèmes (déco en bas du header) */
body[data-game-theme="noel"] .company-header-wrap { position: relative; }
body[data-game-theme="noel"] .company-header { position: relative; padding-bottom: 20px; }
.game-preview-theme-wrapper { position: relative; }
.game-preview-theme-wrapper[data-theme="noel"] .company-header { position: relative; padding-bottom: 20px; }

/* Guirlande visible uniquement pour Noël (cachée pour JO, été, etc.) */
body[data-game-theme="olympiques"] .theme-guirlande,
body[data-game-theme="ete"] .theme-guirlande,
body[data-game-theme="halloween"] .theme-guirlande,
body[data-game-theme="paques"] .theme-guirlande,
body[data-game-theme="printemps"] .theme-guirlande,
body[data-game-theme="football"] .theme-guirlande,
body[data-game-theme="saint_valentin"] .theme-guirlande,
body[data-game-theme="fete_musique"] .theme-guirlande,
body[data-game-theme="automne"] .theme-guirlande,
body[data-game-theme="tour_de_france"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="olympiques"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="ete"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="halloween"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="paques"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="printemps"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="football"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="saint_valentin"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="fete_musique"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="automne"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="tour_de_france"] .theme-guirlande {
    display: none !important;
}
/* Guirlande de Noël - en bas de la bannière, un peu plus bas */
body[data-game-theme="noel"] .theme-guirlande,
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande {
    white-space: nowrap;
    overflow: visible;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    z-index: 25;
    margin: 0;
    padding: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    list-style: none;
}
body[data-game-theme="noel"] .theme-guirlande li,
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li {
    position: relative;
    list-style: none;
    margin: 0 18px;
    padding: 0;
    display: block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation-name: theme-guirlande-clignote;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
body[data-game-theme="noel"] .theme-guirlande li:after,
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li:after {
    content: "";
    position: absolute;
    top: -14px;
    left: 10px;
    width: 48px;
    height: 18px;
    border-bottom: solid rgba(0,0,0,0.2) 2px;
    border-radius: 50%;
}
body[data-game-theme="noel"] .theme-guirlande li:last-child:after,
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li:last-child:after {
    content: none;
}
body[data-game-theme="noel"] .theme-guirlande li:before,
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li:before {
    content: "";
    position: absolute;
    background: rgba(0,0,0,0.25);
    width: 10px;
    height: 9px;
    border-radius: 3px;
    top: -4px;
    left: 1px;
}
body[data-game-theme="noel"] .theme-guirlande li:nth-child(4n+1),
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li:nth-child(4n+1) {
    background: #ff0055;
    box-shadow: 0 4px 20px 2px rgba(255, 0, 85, 0.8);
    animation-duration: 1.5s;
}
body[data-game-theme="noel"] .theme-guirlande li:nth-child(4n+2),
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li:nth-child(4n+2) {
    background: #ffbd00;
    box-shadow: 0 4px 20px 2px rgba(255, 189, 0, 0.8);
    animation-duration: 2.2s;
}
body[data-game-theme="noel"] .theme-guirlande li:nth-child(4n+3),
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li:nth-child(4n+3) {
    background: #00eaff;
    box-shadow: 0 4px 20px 2px rgba(0, 234, 255, 0.8);
    animation-duration: 1.8s;
}
body[data-game-theme="noel"] .theme-guirlande li:nth-child(4n+4),
.game-preview-theme-wrapper[data-theme="noel"] .theme-guirlande li:nth-child(4n+4) {
    background: #00ff6a;
    box-shadow: 0 4px 20px 2px rgba(0, 255, 106, 0.8);
    animation-duration: 2.5s;
}
@keyframes theme-guirlande-clignote {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% {
        opacity: 0.5;
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255,255,255,0);
    }
}

/* PÂQUES - Œufs colorés en bordure */
body[data-game-theme="paques"] .company-header::after,
.game-preview-theme-wrapper[data-theme="paques"] .company-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cellipse cx='12' cy='10' rx='8' ry='10' fill='%23FFB6C1'/%3E%3Cellipse cx='12' cy='10' rx='6' ry='8' fill='%23FF69B4' opacity='0.5'/%3E%3Cellipse cx='40' cy='10' rx='8' ry='10' fill='%2398FB98'/%3E%3Cellipse cx='40' cy='10' rx='6' ry='8' fill='%2332CD32' opacity='0.5'/%3E%3Cellipse cx='68' cy='10' rx='8' ry='10' fill='%2387CEEB'/%3E%3Cellipse cx='68' cy='10' rx='6' ry='8' fill='%234169E1' opacity='0.5'/%3E%3C/svg%3E") repeat-x;
    background-size: 80px 16px;
    z-index: 20;
}

/* HALLOWEEN - Toiles d'araignée + araignées */
body[data-game-theme="halloween"] .company-header::after,
.game-preview-theme-wrapper[data-theme="halloween"] .company-header::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28'%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.8' opacity='0.9'%3E%3Cpath d='M10 14 L10 4 M10 14 L4 10 M10 14 L16 10 M10 14 L10 24 M10 14 L4 18 M10 14 L16 18 M10 14 L6 14 M10 14 L14 14'/%3E%3Cpath d='M10 4 Q14 10 10 14 Q6 10 10 4'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.95'%3E%3Cellipse cx='50' cy='14' rx='4' ry='5'/%3E%3Cpath d='M50 10 L48 6 M50 10 L52 6 M50 18 L48 22 M50 18 L52 22 M50 12 L46 14 M50 12 L54 14 M50 16 L46 14 M50 16 L54 14' stroke='%23fff' stroke-width='0.6' fill='none'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.8' opacity='0.9'%3E%3Cpath d='M90 14 L90 6 M90 14 L84 10 M90 14 L96 10 M90 14 L90 22 M90 14 L84 18 M90 14 L96 18 M90 14 L86 14 M90 14 L94 14'/%3E%3Cpath d='M90 6 Q94 10 90 14 Q86 10 90 6'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.95'%3E%3Cellipse cx='30' cy='20' rx='3' ry='4'/%3E%3Cpath d='M30 17 L28 14 M30 17 L32 14 M30 23 L28 26 M30 23 L32 26 M30 19 L26 20 M30 19 L34 20 M30 21 L26 20 M30 21 L34 20' stroke='%23fff' stroke-width='0.5' fill='none'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.95'%3E%3Cellipse cx='70' cy='8' rx='3' ry='4'/%3E%3Cpath d='M70 5 L68 2 M70 5 L72 2 M70 12 L68 15 M70 12 L72 15 M70 7 L66 8 M70 7 L74 8 M70 9 L66 8 M70 9 L74 8' stroke='%23fff' stroke-width='0.5' fill='none'/%3E%3C/g%3E%3C/svg%3E") repeat-x;
    background-size: 100px 28px;
    background-color: rgba(40, 20, 30, 0.85);
    z-index: 20;
}

/* ÉTÉ - Vagues (creux vers le contenu pour éviter le "trou") */
body[data-game-theme="ete"] .company-header::after,
.game-preview-theme-wrapper[data-theme="ete"] .company-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 0 L120 0 L120 6 Q105 12 90 6 Q75 0 60 6 Q45 12 30 6 Q15 0 0 6 Z' fill='%2300BFFF'/%3E%3C/svg%3E") repeat-x;
    background-size: 120px 12px;
    animation: wave-move 3s linear infinite;
    z-index: 20;
}

@keyframes wave-move {
    0% { background-position-x: 120px; }
    100% { background-position-x: 0; }
}

/* PRINTEMPS - Fleurs */
body[data-game-theme="printemps"] .company-header::after,
.game-preview-theme-wrapper[data-theme="printemps"] .company-header::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Ccircle cx='10' cy='7' r='5' fill='%23FF69B4'/%3E%3Ccircle cx='10' cy='7' r='2' fill='%23FFD700'/%3E%3Ccircle cx='30' cy='9' r='4' fill='%23FFB6C1'/%3E%3Ccircle cx='30' cy='9' r='1.5' fill='%23FFD700'/%3E%3Ccircle cx='50' cy='6' r='5' fill='%23FF69B4'/%3E%3Ccircle cx='50' cy='6' r='2' fill='%23FFD700'/%3E%3C/svg%3E") repeat-x;
    background-size: 60px 14px;
    z-index: 20;
}

/* FOOTBALL - Herbe + ligne de terrain */
body[data-game-theme="football"] .company-header::after,
.game-preview-theme-wrapper[data-theme="football"] .company-header::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0 20 L0 8 L4 14 L8 6 L12 16 L16 4 L20 18 L24 8 L28 12 L32 6 L36 16 L40 10 L44 14 L48 5 L52 18 L56 8 L60 12 L64 7 L68 15 L72 6 L76 14 L80 9 L84 17 L88 5 L92 13 L96 8 L100 16 L104 6 L108 14 L112 7 L116 12 L120 10 L120 20 Z' fill='%232E7D32'/%3E%3Cpath d='M0 20 L2 10 L6 14 L10 7 L14 16 L18 5 L22 12 L26 8 L30 14 L34 6 L38 18 L42 9 L46 13 L50 5 L54 15 L58 8 L62 12 L66 6 L70 16 L74 9 L78 14 L82 6 L86 17 L90 8 L94 13 L98 5 L102 15 L106 9 L110 14 L114 6 L118 11 L120 8 L120 20 Z' fill='%23388E3C' opacity='0.9'/%3E%3Cpath d='M0 20 L1 12 L5 10 L9 15 L13 7 L17 11 L21 14 L25 6 L29 16 L33 9 L37 12 L41 5 L45 14 L49 10 L53 13 L57 7 L61 15 L65 11 L69 8 L73 14 L77 10 L81 16 L85 7 L89 12 L93 9 L97 15 L101 8 L105 13 L109 6 L113 14 L117 9 L120 12 L120 20 Z' fill='%2343A047' opacity='0.85'/%3E%3Cline x1='0' y1='10' x2='120' y2='10' stroke='%23fff' stroke-width='1.5' opacity='0.9'/%3E%3C/svg%3E") repeat-x;
    background-size: 120px 20px;
    z-index: 20;
}

/* JEUX OLYMPIQUES - Anneaux répétés sur toute la bannière */
body[data-game-theme="olympiques"] .company-header,
.game-preview-theme-wrapper[data-theme="olympiques"] .company-header {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%230085C7' stroke-width='2'/%3E%3Ccircle cx='22' cy='10' r='6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='34' cy='10' r='6' fill='none' stroke='%23DF0024' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='6' fill='none' stroke='%23F4C300' stroke-width='2'/%3E%3Ccircle cx='28' cy='16' r='6' fill='none' stroke='%23009F3D' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: 60px 24px;
}
/* JO : pas de bande en bas (évite l’effet "barré" sur les anneaux) */
body[data-game-theme="olympiques"] .company-header::after,
.game-preview-theme-wrapper[data-theme="olympiques"] .company-header::after {
    content: none;
    display: none;
}

/* SAINT-VALENTIN - Cœurs */
body[data-game-theme="saint_valentin"] .company-header::after,
.game-preview-theme-wrapper[data-theme="saint_valentin"] .company-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M12 14 C8 10 4 8 4 5 C4 2 6 0 9 0 C10.5 0 12 1 12 1 C12 1 13.5 0 15 0 C18 0 20 2 20 5 C20 8 16 10 12 14Z' fill='%23FF1493'/%3E%3Cpath d='M40 12 C37 9 34 7 34 5 C34 3 35.5 1.5 37.5 1.5 C38.5 1.5 40 2.5 40 2.5 C40 2.5 41.5 1.5 42.5 1.5 C44.5 1.5 46 3 46 5 C46 7 43 9 40 12Z' fill='%23FF69B4'/%3E%3Cpath d='M68 14 C64 10 60 8 60 5 C60 2 62 0 65 0 C66.5 0 68 1 68 1 C68 1 69.5 0 71 0 C74 0 76 2 76 5 C76 8 72 10 68 14Z' fill='%23FF1493'/%3E%3C/svg%3E") repeat-x;
    background-size: 80px 16px;
    z-index: 20;
}

/* FÊTE DE LA MUSIQUE - Notes */
body[data-game-theme="fete_musique"] .company-header::after,
.game-preview-theme-wrapper[data-theme="fete_musique"] .company-header::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cellipse cx='15' cy='14' rx='5' ry='3' fill='%23333'/%3E%3Crect x='19' y='4' width='2' height='12' fill='%23333'/%3E%3Cpath d='M21 4 Q26 6 24 10' fill='%23333'/%3E%3Cellipse cx='50' cy='12' rx='4' ry='2.5' fill='%239400D3'/%3E%3Crect x='53' y='4' width='2' height='10' fill='%239400D3'/%3E%3Cellipse cx='85' cy='14' rx='5' ry='3' fill='%23FF6347'/%3E%3Crect x='89' y='4' width='2' height='12' fill='%23FF6347'/%3E%3Cpath d='M91 4 Q96 6 94 10' fill='%23FF6347'/%3E%3C/svg%3E") repeat-x;
    background-size: 100px 18px;
    z-index: 20;
}

/* ==============================================
   BOUTONS PERSONNALISÉS PAR THÈME
   ============================================== */

/* 
   Les boutons de thème s'appliquent UNIQUEMENT :
   - Dans le preview admin (.game-preview-theme-wrapper)
   - Sur les pages clientes AVEC l'attribut data-theme-buttons-modal-only défini
   
   Sur la page admin (sans l'attribut), les boutons NE SONT PAS stylisés.
   Cela empêche les boutons "Enregistrer" de l'admin de devenir colorés.
   
   Sur les pages clientes :
   - data-theme-buttons-modal-only="true"  -> boutons stylisés uniquement dans .modal
   - data-theme-buttons-modal-only="false" -> boutons stylisés partout
   
   Option "Utiliser les couleurs de la roue pour les boutons" :
   - data-wheel-colors-for-buttons="true" -> utilise les couleurs du thème pour les boutons
   - data-wheel-colors-for-buttons="false" ou absent -> les boutons gardent leur style par défaut
*/

/* ===== BOUTONS AVEC COULEURS DU THÈME (seulement si wheel-colors-for-buttons est activé) ===== */
/* NOËL */
body[data-game-theme="noel"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="noel"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="noel"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="noel"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="noel"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #C41E3A 0%, #228B22 100%) !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* PÂQUES */
body[data-game-theme="paques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="paques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="paques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="paques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="paques"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #FFB6C1 0%, #98FB98 50%, #87CEEB 100%) !important;
    border-color: #FFD700 !important;
    color: #333 !important;
}

/* HALLOWEEN */
body[data-game-theme="halloween"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="halloween"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="halloween"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="halloween"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="halloween"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #FF6600 0%, #8B0000 100%) !important;
    border-color: #000 !important;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.5);
}

/* ÉTÉ */
body[data-game-theme="ete"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="ete"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="ete"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="ete"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="ete"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #FF512F 0%, #F09819 50%, #FFD700 100%) !important;
    border-color: #00BFFF !important;
}

/* PRINTEMPS */
body[data-game-theme="printemps"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="printemps"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="printemps"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="printemps"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="printemps"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%) !important;
    border-color: #FF69B4 !important;
}

/* FOOTBALL */
body[data-game-theme="football"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="football"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="football"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="football"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="football"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%) !important;
    border-color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.15);
}

/* JEUX OLYMPIQUES */
body[data-game-theme="olympiques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="olympiques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="olympiques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="olympiques"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="olympiques"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #DF0024 0%, #0085C7 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 10px rgba(223, 0, 36, 0.3);
}
/* --- SPÉCIAL HALLOWEEN : ARAIGNÉES SUSPENDUES --- */
#spider-container {
    position: absolute;
    top: 100%; /* Juste sous le header */
    left: 0;
    width: 100%;
    height: 0; 
    overflow: visible; 
    z-index: 50; 
    pointer-events: none;
    display: none; /* Caché par défaut, activé par JS */
}

/* Activer l'affichage uniquement si le thème est halloween */
.game-preview-theme-wrapper[data-theme="halloween"] #spider-container,
body[data-game-theme="halloween"] #spider-container {
    display: block;
}

.spider-wrapper {
    position: absolute;
    top: 0; 
    width: 1px;
    background-color: rgba(0, 0, 0, 0.5); /* Le fil */
    will-change: height;
}

.spider {
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translate(-50%, -20px); /* Ajustement pour coller au fil */
    width: 40px;
    height: 35px;
}

.spider svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));
}

.spider .eye { 
    animation: spider-blink 3s infinite; 
    /* Ces deux lignes fixent le problème de l'envol */
    transform-origin: center; 
    transform-box: fill-box; 
}

@keyframes spider-blink {
    0%, 96%, 100% { transform: scaleY(1); }
    98% { transform: scaleY(0.1); }
}
/* SAINT-VALENTIN */
body[data-game-theme="saint_valentin"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="saint_valentin"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="saint_valentin"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="saint_valentin"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="saint_valentin"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #FF1493 0%, #FF69B4 50%, #FFB6C1 100%) !important;
    border-color: #C71585 !important;
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.4);
}

/* FÊTE DE LA MUSIQUE */
body[data-game-theme="fete_musique"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="fete_musique"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="fete_musique"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="fete_musique"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="fete_musique"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #9400D3 0%, #FF6347 50%, #FFD700 100%) !important;
    border-color: #333 !important;
}

/* AUTOMNE */
body[data-game-theme="automne"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="automne"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="automne"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="automne"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="automne"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #c0392b 0%, #e67e22 50%, #f1c40f 100%) !important;
    border-color: #8B4513 !important;
    box-shadow: 0 2px 10px rgba(230, 126, 34, 0.4);
}

/* ==============================================
   AUTOMNE - FEUILLES QUI TOMBENT SUR LE HEADER
   ============================================== */

.autumn-leaves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 50;
}

.autumn-leaf {
    position: absolute;
    top: -20px;
    width: 18px;
    height: 18px;
    /* Forme de feuille */
    border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
    opacity: 0.9;
    pointer-events: none;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Tige de la feuille */
.autumn-leaf::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 1px;
    background: rgba(0,0,0,0.2);
    transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes autumn-leaf-fall {
    0% {
        top: -15%;
        transform: rotate(0deg);
    }
    100% {
        top: 110%;
        transform: rotate(360deg);
    }
}

@keyframes autumn-leaf-sway {
    0% {
        margin-left: -20px;
    }
    100% {
        margin-left: 20px;
    }
}

/* ==============================================
   ANIMATIONS DES ÉLÉMENTS FLOTTANTS
   ============================================== */

/* Flocons qui TOMBENT (Noël) */
.theme-snowfall {
    animation: snowfall-drop 10s linear infinite;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

@keyframes snowfall-drop {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Float animation générale - utilisée par tous les thèmes pour les icônes qui ne tombent pas */
.theme-float {
    animation: theme-float-anim 5s ease-in-out infinite;
}

@keyframes theme-float-anim {
    0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.75; }
    50% { transform: translateY(-15px) rotate(5deg); opacity: 0.95; }
}

/* Pulse (Été) */
.theme-pulse {
    animation: theme-pulse-anim ease-in-out infinite;
}

@keyframes theme-pulse-anim {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Bounce (Football) */
.theme-bounce {
    animation: theme-bounce-anim ease-in-out infinite;
}

@keyframes theme-bounce-anim {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(15deg); }
}

/* Hearts floating up (Saint-Valentin) */
.theme-hearts-rise {
    animation: hearts-rise linear infinite;
}

@keyframes hearts-rise {
    0% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-20px) scale(1);
        opacity: 0;
    }
}

/* Music bounce (Fête de la Musique) */
.theme-music-bounce {
    animation: music-bounce ease-in-out infinite;
}

@keyframes music-bounce {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    25% { transform: translateY(-8px) rotate(0deg); }
    50% { transform: translateY(0) rotate(10deg); }
    75% { transform: translateY(-8px) rotate(0deg); }
}

/* Leaf fall (Automne) - pour les feuilles qui tombent */
.theme-leaf-fall {
    animation: theme-leaf-fall-anim 10s linear infinite;
}

@keyframes theme-leaf-fall-anim {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.85;
    }
    50% {
        transform: translateY(50vh) rotate(180deg) translateX(20px);
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) translateX(-20px);
        opacity: 0;
    }
}

/* ==============================================
   ANIMATIONS SPÉCIALES PAR THÈME
   ============================================== */

/* --- HALLOWEEN --- */

/* Fantômes qui flottent de façon effrayante */
.theme-ghost-float {
    animation: ghost-float-anim 6s ease-in-out infinite;
}

@keyframes ghost-float-anim {
    0%, 100% { 
        transform: translateY(0) translateX(0) scale(1); 
        opacity: 0.7; 
    }
    25% { 
        transform: translateY(-20px) translateX(10px) scale(1.05); 
        opacity: 0.9; 
    }
    50% { 
        transform: translateY(-10px) translateX(-10px) scale(0.95); 
        opacity: 0.6; 
    }
    75% { 
        transform: translateY(-25px) translateX(5px) scale(1.02); 
        opacity: 0.85; 
    }
}

/* Fantômes (ghost-icon.svg) qui traversent l'écran avec mouvement ondulé naturel */
.theme-ghost-cross {
    animation: ghost-cross-anim 40s linear infinite;
    filter: drop-shadow(0 0 5px rgba(60, 60, 60, 0.25));
}

/* Traversée avec mouvement haut/bas fluide et naturel */
@keyframes ghost-cross-anim {
    0% { 
        transform: translateX(-60px) translateY(0px) rotate(0deg); 
        opacity: 0; 
    }
    2% { 
        transform: translateX(0px) translateY(-5px) rotate(-1deg); 
        opacity: 0.7; 
    }
    7% { 
        transform: translateX(5vw) translateY(12px) rotate(1deg); 
    }
    12% { 
        transform: translateX(10vw) translateY(-8px) rotate(-0.5deg); 
    }
    18% { 
        transform: translateX(16vw) translateY(15px) rotate(1.5deg); 
    }
    23% { 
        transform: translateX(21vw) translateY(-12px) rotate(-1deg); 
    }
    29% { 
        transform: translateX(27vw) translateY(8px) rotate(0.5deg); 
    }
    35% { 
        transform: translateX(33vw) translateY(-15px) rotate(-1.5deg); 
    }
    41% { 
        transform: translateX(39vw) translateY(10px) rotate(1deg); 
    }
    47% { 
        transform: translateX(45vw) translateY(-6px) rotate(-0.5deg); 
    }
    53% { 
        transform: translateX(51vw) translateY(14px) rotate(1deg); 
    }
    59% { 
        transform: translateX(57vw) translateY(-10px) rotate(-1deg); 
    }
    65% { 
        transform: translateX(63vw) translateY(8px) rotate(0.5deg); 
    }
    71% { 
        transform: translateX(69vw) translateY(-14px) rotate(-1.5deg); 
    }
    77% { 
        transform: translateX(75vw) translateY(6px) rotate(1deg); 
    }
    83% { 
        transform: translateX(81vw) translateY(-10px) rotate(-0.5deg); 
    }
    89% { 
        transform: translateX(89vw) translateY(12px) rotate(1deg); 
    }
    95% { 
        transform: translateX(96vw) translateY(-5px) rotate(-0.5deg); 
    }
    98% { 
        transform: translateX(100vw) translateY(0px) rotate(0deg); 
        opacity: 0.7; 
    }
    100% { 
        transform: translateX(calc(100vw + 60px)) translateY(0px) rotate(0deg); 
        opacity: 0; 
    }
}

/* Chauve-souris qui volent avec battement d'ailes */
.theme-bat-fly {
    animation: bat-fly-anim 15s ease-in-out infinite, bat-wing-flap 0.15s ease-in-out infinite;
}

/* Traversée de l'écran */
@keyframes bat-fly-anim {
    0% { 
        transform: translateY(10vh) translateX(-100vw) rotate(-5deg); 
        opacity: 0; 
    }
    5% { opacity: 0.9; }
    25% { 
        transform: translateY(25vh) translateX(-30vw) rotate(3deg); 
    }
    50% { 
        transform: translateY(15vh) translateX(0vw) rotate(-3deg); 
    }
    75% { 
        transform: translateY(30vh) translateX(30vw) rotate(5deg); 
    }
    95% { opacity: 0.8; }
    100% { 
        transform: translateY(10vh) translateX(100vw) rotate(-5deg); 
        opacity: 0; 
    }
}

/* Battement d'ailes rapide (écrasement vertical) */
@keyframes bat-wing-flap {
    0%, 100% { 
        scale: 1 1;
    }
    50% { 
        scale: 1.1 0.7;
    }
}

/* --- ÉTÉ --- */

/* Soleil qui pulse et brille */
.theme-sun-pulse {
    animation: sun-pulse-anim 5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.5));
}

@keyframes sun-pulse-anim {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        opacity: 0.8;
        filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.5));
    }
    50% { 
        transform: scale(1.15) rotate(15deg); 
        opacity: 1;
        filter: drop-shadow(0 0 15px rgba(255, 200, 0, 0.8));
    }
}

/* --- PRINTEMPS --- */

/* Papillons qui voltigent */
.theme-butterfly-fly {
    animation: butterfly-fly-anim 7s ease-in-out infinite;
}

@keyframes butterfly-fly-anim {
    0% { 
        transform: translateY(100vh) translateX(-20px) rotate(-5deg) scale(0.8); 
        opacity: 0; 
    }
    10% { opacity: 0.9; }
    25% { 
        transform: translateY(70vh) translateX(30px) rotate(10deg) scale(1); 
    }
    50% { 
        transform: translateY(40vh) translateX(-20px) rotate(-8deg) scale(0.9); 
    }
    75% { 
        transform: translateY(15vh) translateX(25px) rotate(12deg) scale(1.05); 
    }
    90% { opacity: 0.7; }
    100% { 
        transform: translateY(-20px) translateX(-10px) rotate(-5deg) scale(0.85); 
        opacity: 0; 
    }
}

/* Coccinelles qui rampent */
.theme-ladybug-crawl {
    animation: ladybug-crawl-anim 8s linear infinite;
}

@keyframes ladybug-crawl-anim {
    0%, 100% { 
        transform: translateX(0) translateY(0) rotate(0deg); 
        opacity: 0.8;
    }
    25% { 
        transform: translateX(15px) translateY(-5px) rotate(45deg); 
    }
    50% { 
        transform: translateX(5px) translateY(-15px) rotate(90deg); 
    }
    75% { 
        transform: translateX(-10px) translateY(-8px) rotate(135deg); 
    }
}

/* --- FOOTBALL --- */

/* Ballon qui rebondit */
.theme-ball-bounce {
    animation: ball-bounce-anim 3s ease-in-out infinite;
}

@keyframes ball-bounce-anim {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1); 
    }
    15% { 
        transform: translateY(-30px) rotate(90deg) scale(0.95); 
    }
    30% { 
        transform: translateY(0) rotate(180deg) scale(1.05); 
    }
    45% { 
        transform: translateY(-20px) rotate(270deg) scale(0.97); 
    }
    60% { 
        transform: translateY(0) rotate(360deg) scale(1.03); 
    }
    75% { 
        transform: translateY(-10px) rotate(405deg) scale(0.98); 
    }
    90% { 
        transform: translateY(0) rotate(450deg) scale(1.01); 
    }
}

/* --- JEUX OLYMPIQUES --- */

/* Torche avec effet de flamme */
.theme-torch-glow {
    animation: torch-glow-anim 4s ease-in-out infinite;
    filter: drop-shadow(0 -5px 10px rgba(255, 100, 0, 0.6));
}

@keyframes torch-glow-anim {
    0%, 100% { 
        transform: rotate(-3deg); 
        filter: drop-shadow(0 -5px 10px rgba(255, 100, 0, 0.6));
    }
    25% { 
        transform: rotate(2deg); 
        filter: drop-shadow(0 -8px 15px rgba(255, 150, 0, 0.8));
    }
    50% { 
        transform: rotate(-2deg); 
        filter: drop-shadow(0 -6px 12px rgba(255, 80, 0, 0.7));
    }
    75% { 
        transform: rotate(3deg); 
        filter: drop-shadow(0 -10px 18px rgba(255, 120, 0, 0.9));
    }
}

/* Médaille qui balance */
.theme-medal-swing {
    animation: medal-swing-anim 4s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes medal-swing-anim {
    0%, 100% { 
        transform: rotate(-15deg); 
    }
    50% { 
        transform: rotate(15deg); 
    }
}

/* --- PÂQUES --- */

/* Poussin qui sautille */
.theme-chick-hop {
    animation: chick-hop-anim 3s ease-in-out infinite;
}

@keyframes chick-hop-anim {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    20% { 
        transform: translateY(-12px) rotate(-5deg); 
    }
    40% { 
        transform: translateY(0) rotate(0deg); 
    }
    60% { 
        transform: translateY(-8px) rotate(5deg); 
    }
    80% { 
        transform: translateY(0) rotate(0deg); 
    }
}

/* Lapin qui sautille */
.theme-bunny-hop {
    animation: bunny-hop-anim 4s ease-in-out infinite;
}

@keyframes bunny-hop-anim {
    0%, 100% { 
        transform: translateY(0) translateX(0) scaleY(1); 
    }
    10% { 
        transform: translateY(0) translateX(0) scaleY(0.9); 
    }
    30% { 
        transform: translateY(-25px) translateX(10px) scaleY(1.1); 
    }
    50% { 
        transform: translateY(0) translateX(15px) scaleY(0.95); 
    }
    60% { 
        transform: translateY(0) translateX(15px) scaleY(0.9); 
    }
    80% { 
        transform: translateY(-20px) translateX(5px) scaleY(1.05); 
    }
}

/* ==============================================
   RESPONSIVE
   ============================================== */

/* ==============================================
   EFFET CLIC BOUTON "FAIRE TOURNER LA ROUE"
   ============================================== */
#submitForm.btn-spin-wheel,
.btn-spin-wheel {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#submitForm.btn-spin-wheel:active,
.btn-spin-wheel:active {
    transform: scale(0.97);
}
#submitForm.btn-spin-wheel.btn-spin-click,
.btn-spin-wheel.btn-spin-click {
    animation: btn-spin-burst 0.5s ease-out;
}
@keyframes btn-spin-burst {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    30% { transform: scale(0.96); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (max-width: 480px) {
    .theme-mascot {
        display: none;
    }
    
    .theme-gimmicks > div {
        font-size: 0.7rem !important;
    }
    
    .theme-gimmicks img {
        max-width: 24px !important;
        max-height: 24px !important;
    }
}

@keyframes theme-roll-ball {
    0% {
        left: -40px; /* Départ hors écran */
        transform: rotate(0deg);
    }
    100% {
        left: 100%; /* Arrivée au bout */
        /* La rotation est maintenant calculée par le JS pour être réaliste */
        transform: rotate(var(--ball-rotation)); 
    }
}

.theme-rolling-ball {
    position: absolute;
    bottom: -8px; 
    width: 30px; /* Diamètre du ballon */
    height: 30px;
    background: white; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    z-index: 25;
    pointer-events: none;

    /* DYNAMIQUE : La durée est calculée par le JS */
    animation: theme-roll-ball var(--ball-duration, 5s) linear infinite;
    
    /* Optimisation pour fluidifier l'animation sur mobile */
    will-change: left, transform; 
}

.theme-rolling-ball i {
    color: #222;
    font-size: 24px;
}

/* ==============================================
   TOUR DE FRANCE - ROUTE ANIMÉE + CYCLISTE
   ============================================== */

/* Route en bas du header - positionnée sous le header pour ne pas cacher le logo */
.theme-road-strip {
    position: absolute;
    bottom: -24px; /* Positionnée sous le header */
    left: 0;
    width: 100%;
    height: 28px; /* Réduite de 40px à 28px */
    background: #4a4a4a;
    border-top: 2px solid #fff;
    overflow: visible; /* Permet au cycliste de dépasser */
    z-index: 25;
}

/* Lignes discontinues de la route */
.theme-road-strip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 200%;
    height: 2px;
    background: repeating-linear-gradient(to right, #fff 0, #fff 15px, transparent 15px, transparent 30px);
    transform: translateY(-50%);
    animation: tdf-road-move 1.5s linear infinite;
}

@keyframes tdf-road-move {
    0% { transform: translateX(0) translateY(-50%); }
    100% { transform: translateX(-30px) translateY(-50%); }
}

/* Cycliste animé - plus grand et visible */
.theme-cyclist-wrapper {
    position: absolute;
    bottom: 2px; /* Ajusté pour être bien posé sur la route */
    left: -100px;
    width: 80px; /* Agrandi de 60px à 80px */
    height: 55px;
    animation: tdf-cycle-across var(--cyclist-duration, 10s) linear infinite;
    z-index: 30;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}

@keyframes tdf-cycle-across {
    0% { left: -100px; }
    100% { left: 100%; }
}

/* Rotation des roues du vélo */
.theme-cyclist-wrapper .bike-wheel {
    transform-origin: center;
    animation: tdf-wheel-spin 0.4s linear infinite;
}

@keyframes tdf-wheel-spin {
    100% { transform: rotate(360deg); }
}

/* Header decoration - bordure bas avec motif route */
body[data-game-theme="tour_de_france"] .company-header::after,
.game-preview-theme-wrapper[data-theme="tour_de_france"] .company-header::after {
    content: none; /* On utilise la route animée JS, pas de pseudo-élément */
}

/* Assurer que le header a assez d'espace pour la route */
body[data-game-theme="tour_de_france"] .company-header,
.game-preview-theme-wrapper[data-theme="tour_de_france"] .company-header {
    margin-bottom: 28px; /* Espace pour la route qui dépasse */
    position: relative;
    overflow: visible !important;
}

body[data-game-theme="tour_de_france"] .company-header-wrap,
.game-preview-theme-wrapper[data-theme="tour_de_france"] .company-header-wrap {
    overflow: visible !important;
    margin-bottom: 28px;
}

/* Animation cycling-float pour les icônes flottantes */
.theme-cycling-float {
    animation: theme-cycling-float-anim ease-in-out infinite;
}

@keyframes theme-cycling-float-anim {
    0%, 100% { transform: translateY(0) translateX(0) rotate(-3deg); opacity: 0.75; }
    25% { transform: translateY(-10px) translateX(5px) rotate(0deg); }
    50% { transform: translateY(-5px) translateX(10px) rotate(3deg); opacity: 0.95; }
    75% { transform: translateY(-10px) translateX(5px) rotate(0deg); }
}

/* TOUR DE FRANCE - Boutons */
body[data-game-theme="tour_de_france"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .btn-primary,
body[data-game-theme="tour_de_france"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="true"] .modal .button.primary,
body[data-game-theme="tour_de_france"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .btn-primary,
body[data-game-theme="tour_de_france"][data-wheel-colors-for-buttons="true"][data-theme-buttons-modal-only="false"] .button.primary,
.game-preview-theme-wrapper[data-theme="tour_de_france"][data-wheel-colors-for-buttons="true"] .button.primary {
    background: linear-gradient(135deg, #FFCD00 0%, #F7941D 100%) !important;
    border-color: #333 !important;
    color: #333 !important;
    box-shadow: 0 2px 10px rgba(255, 205, 0, 0.4);
}