/* CSS bouton random */
@media screen and (max-width: 767px) and (orientation: portrait) {
            .modal-dialog{
                width: 100% !important;
                margin: 0 auto !important;
                max-width: 100% !important;
                margin-top:55px !important
            }
            .admin-panel > center > button {
                /*width: 100% !important;*/
                display:inline-block !important;
            }
            .contests-grid {
                position:relative;
                width: 100% !important;
                max-width: 100% !important;
                grid-template-columns: 1fr !important;
            }
            .xcountdown {
                font-size: 0.9rem !important;
            }
            .contest-title {
                 font-size: 1.7rem !important;
            }
            .contest-description{
                text-align: left !important;
                /*line-height: 1.3rem !important;*/
                font-size: 1.1rem !important;
            }
            .has-global-padding{
                padding-left:7px;
                padding-right:7px;
            }
            .contest-image{
                height:200px !important;
                border-bottom:2px solid rgba(0, 0, 0, 1) !important;
            }
            .contest-content{
                padding:15px !important;
            }
            .contest-conditions {
                font-size: 0.8rem !important;
                margin-top:10px !important;
            }
            .contest-card {
            background: white;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 5px 10px rgba(255, 255, 255, 0.15);
            transition: all 0.3s ease;
            position: relative;
            border:2px solid rgba(0, 0, 0, 1) !important;
            }
            .contests-grid{
                row-gap: 10px !important;
            }

        }
         .contest-image{
                height:280px;
            }

         .text-gagnant{
            color: #ffd700;
         }
         .btn-set-random-winner{
           font-size:16pt;
           color:rgba(0,0,0,0.6);
         }
         .btn-loading-pulse {
           position: relative;
           animation: btn-pulse 1.5s ease-in-out infinite;
         }
         @keyframes btn-pulse {
           0% { opacity: 0.6; transform: scale(1); }
           50% { opacity: 0.8; transform: scale(1.02); }
           100% { opacity: 0.6; transform: scale(1); }
         }
         /* Fin - CSS bouton random */
         /* CSS pour l'éditeur de concours */
         .contest-edit.editing {
           background-color: rgba(116, 185, 255, 0.1);
           border: 2px dashed #74b9ff;
           border-radius: 8px;
           padding: 5px;
           outline: none;
           cursor: text;
         }
         .contest-edit {
           cursor: pointer;
           transition: all 0.2s ease;
           outline: none !important;
         }
         .contest-edit:hover:not([contenteditable="true"]) {
           opacity: 0.8;
         }
         /* Fin - CSS pour l'éditeur de concours */
         /* Admin Panel Styles */
         body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         .contest-title{
            font-family: "Anton", sans-serif;
            font-weight: 400;
            font-style: normal;
             letter-spacing:1px;
         }
         .main-header {
           text-align: center;
           margin-bottom: 40px;
           color: white;
         }
         .main-header h1 {
           font-size: 2rem;
           font-weight: 700;
           margin-bottom: 5px;
         }
         .main-header p {
           font-size: 1.2rem;
           opacity: 0.9;
           margin-bottom: 30px;
         }
         .new-contest-btn {
           display: inline-flex;
           align-items: center;
           gap: 10px;
           background: linear-gradient(135deg, #ff6b6b, #ee5a24);
           color: white;
           border: none;
           padding: 15px 30px;
           border-radius: 50px;
           font-size: 1.1rem;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
           text-decoration: none;
         }
         .new-contest-btn:hover {
            background: linear-gradient(135deg, #ee5a24, #ff6b6b);
         }
         .admin-panel {
           background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(10px);
           border-radius: 20px;
           padding: 20px;
           border: 1px solid rgba(255,255,255,0.2);
         }
         .admin-panel h3 {
           color: #2c3e50;
           margin-bottom: 15px;
           font-size: 1.2rem;
           display: flex;
           align-items: center;
           gap: 10px;
         }
         .shortcode {
           background: linear-gradient(135deg, #74b9ff, #0984e3);
           color: white;
           padding: 10px 15px;
           border-radius: 10px;
           font-family: 'Courier New', monospace;
           font-weight: bold;
           display: inline-block;
           margin-bottom: 15px;
         }
         .theme-btn {
           background: linear-gradient(135deg, #0984e3, #0984e3);
           color: white;
           border: none;
           padding: 10px 20px;
           border-radius: 5px;
           cursor: pointer;
           transition: all 0.3s ease;
           font-weight: 600;
           display: inline-flex;
           align-items: center;
           gap: 8px;
         }
         .theme-btn:hover {
            
         }
         .actif-btn {
           background: linear-gradient(135deg,rgb(2, 176, 25),rgb(0, 148, 49));
         }
         .inactif-btn {
           background: linear-gradient(135deg,rgb(202, 0, 0),rgb(148, 7, 0));
         }
         .loading-spinner {
           display: none;
           width: 20px;
           height: 20px;
           border: 2px solid #ffffff;
           border-top: 2px solid transparent;
           border-radius: 50%;
           animation: spin 1s linear infinite;
         }
         @keyframes spin {
           0% { transform: rotate(0deg); }
           100% { transform: rotate(360deg); }
         }
         /* Fin - Admin Panel Styles */
         /* Contests Styles */
         .form-input {
           /*width: 100% !important;*/
           appearance: none  !important;
           -webkit-appearance: none  !important;
           background-color: #f8f8f8  !important;
           border: 1px solid #d1d1d1  !important;
           border-radius: 8px  !important;
           padding: 8px 12px  !important;
           font-size: calc(0.6em + 8px)  !important;
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif  !important;
           color: #333  !important;
           transition: border-color 0.2s ease, box-shadow 0.2s ease  !important;
           z-index:9999;
               min-height: 30px;
         }
         .contests-grid {
           display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
            max-grid-template-columns: repeat(3, 1fr) !important;
           gap: 40px;
           max-width: 1400px;
           margin: 0 auto;
           justify-items: center;
         }
         .contest-wrapper {
           display: flex;
           flex-direction: column;
           gap: 20px;
           width:100%;
          
         }
         .contest-card {
           background: white;
           border-radius: 25px;
           overflow: hidden;
           box-shadow: 0 5px 10px rgba(255, 255, 255, 0.15);
           transition: all 0.3s ease;
           position: relative;
            border:1px solid rgba(0,0,0,0.2);
         }
         .contest-card:hover {
           box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
         }
         .participants-badge {
            display: none;
         position: absolute;
         top: 20px;
         left: 20px;
         background: rgba(255,255,255,0.95);
         backdrop-filter: blur(10px);
         color: #2c3e50;
         padding: 8px 16px;
         border-radius: 25px;
         font-weight: 700;
         font-size: 0.9rem;
         box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         transition: all 0.3s ease;
         }
         .participants-badge:hover {
         transform: scale(1.05);
         background: #2c3e50;
         color: white;
         cursor: pointer;
         }
         .contest-content {
         padding: 30px;
         }
         .contest-title {
            font-size: 2rem;
           
            color: #2c3e50;
            margin-bottom: 10px;
            line-height: 1.2;
            text-align: center;
         }
         .contest-description {
         font-size: 1.1rem;
         color: #636e72;
         text-align: center;
         margin-bottom: 25px;
         line-height: 1.5;
         text-align:centers;
         }
            .xcountdown {
        position: absolute;
         top: 20px;
         right: 20px;
         background: rgba(54, 54, 54, 0.95);
         backdrop-filter: blur(10px);
         color: #ffffff;
         padding: 8px 16px;
         border-radius: 25px;
         font-weight: 700;
         font-size: 0.9rem;
         transition: all 0.3s ease;
         }
         .contest-form {
         display: flex;
         flex-direction: column;
         gap: 15px;
         margin-bottom: 25px;
         }
         .form-input {
         padding: 15px 20px;
         border: 2px solid #e1e8ed;
         border-radius: 15px;
         font-size: 1rem;
         transition: all 0.3s ease;
         background: #f8f9fa;
         font-family: inherit;
         }
         .form-input:focus {
         outline: none;
         border-color: #74b9ff;
         background: white;
         box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.1);
         }
         .form-input::placeholder {
         color: #b2bec3;
         font-style: italic;
         }
         .participate-btn {
         color: white;
         border: none;
         padding: 18px 30px;
         border-radius: 50px;
         font-size: 1.1rem;
         font-weight: 700;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         margin: 0 auto;
         min-width: 200px;
         }
         .participate-btn:hover {
         transform: translateY(-1px);
         }
         .participate-btn:active {
         transform: translateY(-1px);
         }
         .contest-conditions {
         text-align: center;
         font-size: 0.9rem;
         color: #636e72;
         margin-top: 20px;
         line-height: 1.4;
         }
         .contest-conditions a {
         color: #74b9ff;
         text-decoration: none;
         font-weight: 600;
         transition: color 0.3s ease;
         }
         .contest-conditions a:hover {
         color: #0984e3;
         text-decoration: underline;
         }
         .contest-confirmation {
         margin-top: 2rem;
         animation: slideInUp 0.8s ease-out;
         }
         .confirmation-card {
         border-radius: 25px;
         padding: 2rem;
         text-align: center;
         position: relative;
         overflow: hidden;
         box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
         }
         .confirmation-icon {
         position: relative;
         margin-bottom: 1.5rem;
         }
         .check-circle {
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, #00b894, #00a085);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 1rem;
         box-shadow: 0 10px 30px rgba(0, 184, 148, 0.4);
         animation: bounceIn 0.8s ease-out 0.3s both;
         }
         .check-circle i {
         font-size: 2rem;
         color: white;
         animation: checkPop 0.6s ease-out 0.8s both;
         }
         .sparkles {
         position: absolute;
         top: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 100px;
         height: 100px;
         }
         .sparkle {
         position: absolute;
         width: 8px;
         height: 8px;
         background: #ffd700;
         border-radius: 50%;
         animation: sparkleFloat 2s infinite;
         }
         .sparkle-1 {
         top: 10px;
         left: 20px;
         animation-delay: 0s;
         }
         .sparkle-2 {
         top: 15px;
         right: 25px;
         animation-delay: 0.5s;
         }
         .sparkle-3 {
         bottom: 20px;
         left: 15px;
         animation-delay: 1s;
         }
         .sparkle-4 {
         bottom: 25px;
         right: 20px;
         animation-delay: 1.5s;
         }
         .confirmation-content {
         color:#636e72 !important;
         margin-bottom: 1.5rem;
         
         }
         .confirmation-title {
            color:black !important;
         font-size: 2rem;
         font-weight: 700;
         margin-bottom: 1rem;
         animation: fadeInUp 0.8s ease-out 0.5s both;
         }
         .gradient-text {
         background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
         background-size: 200% 200%;
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         animation: gradientFlow 3s ease-in-out infinite;
         }
         .confirmation-message {
            color:#636e72 !important;
         font-size: 1.2rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
         animation: fadeInUp 0.8s ease-out 0.7s both;
         }
         .confirmation-subtitle {
            color:#636e72 !important;
         font-size: 1rem;
         opacity: 0.9;
         font-weight: 400;
         animation: fadeInUp 0.8s ease-out 0.9s both;
         }
         .confirmation-footer {
         animation: fadeInUp 0.8s ease-out 1.1s both;
         }
         .good-luck-badge {
         background: linear-gradient(135deg, #ffd700, #ffed4e);
         color: #2d3436;
         padding: 0.75rem 2rem;
         border-radius: 50px;
         font-weight: 700;
         font-size: 1.1rem;
         display: inline-block;
         box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
         animation: pulse 2s infinite;
         }
         /* Fin - Contests Styles */
         /* Modal Styles */
         .winner-row {
         background-color: #fff3cd !important;
         }
         .badge-winner {
         background-color: #ffd700 !important;
         color: #000 !important;
         }
         .btn-sm {
         padding: 0.25rem 0.5rem;
         font-size: 0.875rem;
         }
         #modalParticipantsTable td {
         vertical-align: middle;
         }
         .modal-xl {
         max-width: 75%;
         margin-top: 30px;
         }
         .media-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         gap: 15px;
         max-height: 400px;
         overflow-y: auto;
         padding: 10px;
         }
         .media-item {
         border: 2px solid transparent;
         border-radius: 8px;
         cursor: pointer;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         background: #f8f9fa;
         }
         .media-item:hover {
         border-color: #007bff;
         transform: scale(1.02);
         }
         .media-item.selected {
         border-color: #28a745;
         box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
         }
         .media-item img {
         width: 100%;
         height: 120px;
         object-fit: cover;
         border-radius: 6px;
         }
         .media-item-title {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background: rgba(0, 0, 0, 0.7);
         color: white;
         padding: 5px;
         font-size: 11px;
         text-align: center;
         border-radius: 0 0 6px 6px;
         word-wrap: break-word;
         }
         .selected-info {
         background-color: #f8f9fa;
         border-radius: 8px;
         padding: 15px;
         margin-top: 15px;
         display: none;
         }
         .no-images {
         text-align: center;
         padding: 40px;
         color: #6c757d;
         }
         .image-info {
         font-size: 10px;
         color: #666;
         text-align: center;
         margin-top: 5px;
         }
         hr{
            opacity:0.1;
         }