/**
 * Styles principaux - Frontend Spinomax
 */

/* ========================================
   VARIABLES ET RESET
   ======================================== */

:root {
    --primary-color:#FF6B35;    /* Orange uni */
    --secondary-color:#764BA2;  /* Violet uni */
    --success-color:#27AE60;
    --danger-color:#E74C3C;
    --warning-color:#F39C12;
    --info-color:#3498DB;
    --dark-color:#2C3E50;
    --light-bg:#F4F6F9;
    --white:#FFFFFF;
    --text-color:#333333;
    --border-color:#E0E0E0;
    
    --font-main:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --transition:all 0.3s ease;
    
    --sidebar-width:200px;
    --widget-width:300px;
    --content-max-width:900px;
}

* {margin:0; padding:0; box-sizing:border-box;}
.img {width:100%; height:auto; display:block;}
body {/*font-family:var(--font-main);*/ font-family:"Boogaloo", sans-serif; font-weight:400; font-style:normal; font-size:18px; line-height:1.6; color:var(--text-color); background:var(--light-bg);}

/* ========================================
   LAYOUT AVEC SIDEBARS
   ======================================== */

.container {max-width:1400px; margin:0 auto; padding:0 clamp(10px, 3vw, 20px);}
.page-layout-container {display:flex; gap:20px; margin-top:20px;}
.sidebar-left {width:var(--sidebar-width); flex-shrink:0;}
.main-content-area {flex:1; max-width:var(--content-max-width);}
.sidebar-right {width:var(--widget-width); flex-shrink:0;}

/* ========================================
   SIDEBAR MENU
   ======================================== */

.sidebar-menu {background:var(--secondary-color); border-radius:12px; padding:10px;}
.sidebar-menu .menu-item {display:block; padding:12px 15px; color:var(--white); text-decoration:none; border-radius:8px; margin-bottom:5px; transition:var(--transition);}
.sidebar-menu .menu-item:hover {background:rgba(255, 255, 255, 0.1);}
.sidebar-menu .menu-item.active {background:rgba(255, 255, 255, 0.2); font-weight:bold;}

/* ========================================
   WIDGETS
   ======================================== */

.sidebar-right .widget-box {background:var(--white); border-radius:12px; padding:20px; margin-bottom:20px; box-shadow:0 2px 10px rgba(0, 0, 0, 0.05);}
.sidebar-right .widget-title {font-size:1.2em; color:var(--secondary-color); margin-bottom:15px; padding-bottom:10px; border-bottom:2px solid var(--secondary-color);}
.sidebar-right .widget-content {font-size:0.95em; color:#666;}
.sidebar-right .widget-ad {text-align:center;}

/* ========================================
   HEADER
   ======================================== */

.site-header {background:var(--white); padding:0 0 10px 0; box-shadow:0 2px 10px rgba(0, 0, 0, 0.3); margin:0 0 30px;}
.header-content {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.logo a {text-decoration:none; color:var(--primary-color);}
.header-logo {display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.header-logo img {width:100%; height:auto; max-width:250px;}
.header-title, .site-name {font-size:clamp(3em, 4vw, 5em); font-weight:bold; text-shadow:1px 1px 1px rgba(0, 0, 0, 1); letter-spacing:1px;}
.header-title span:nth-child(1) {color: #ff6b35;}
.header-title span:nth-child(2) {color: #890670;}
.header-title span:nth-child(3) {color: #fe51cb;}
.header-title span:nth-child(4) {color: #e60440;}
.header-title span:nth-child(5) {color: #fff32a;}
.header-title span:nth-child(6) {color: #002b9a;}
.header-title span:nth-child(7) {color: #5fa37e;}
.header-title span:nth-child(8) {color: #764ba2;}
.header-subtitle, .site-tagline {color:var(--secondary-color); font-size:clamp(1em, 3vw, 1.8em);}


/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:0.9em; flex-wrap:wrap;}
.breadcrumb a {color:var(--primary-color); text-decoration:none; transition:var(--transition);}
.breadcrumb a:hover {text-decoration:underline;}
.breadcrumb .separator {color:#999;}
.breadcrumb .current {color:var(--text-color); font-weight:500;}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {background:var(--secondary-color);  /* Violet uni */ color:var(--white); padding:40px 0 20px; margin-top:60px;}
.footer-blocks {display:grid; gap:30px; margin-bottom:40px;}
.footer-blocks-1 { grid-template-columns:1fr; }
.footer-blocks-2 { grid-template-columns:repeat(2, 1fr); }
.footer-blocks-3 { grid-template-columns:repeat(3, 1fr); }
.footer-blocks-4 { grid-template-columns:repeat(4, 1fr); }

.footer-block {font-size:0.9em; line-height:1.8;}
.footer-block a {color:var(--white); opacity:0.8; text-decoration:none; transition:var(--transition);}
.footer-block a:hover {opacity:1;}
.footer-bottom {border-top:1px solid rgba(255, 255, 255, 0.1); padding-top:20px;}
.footer-copyright {text-align:center; font-size:0.85em; opacity:0.7;}

/* ========================================
   ZONES MARKETING
   ======================================== */

.marketing-zone-inline {padding:20px 0; text-align:center; margin-bottom:20px;}

/* ========================================
   MESSAGES ET ALERTS
   ======================================== */

.error-message {background:var(--white); border-radius:12px; padding:60px 40px; text-align:center; box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);}
.error-message h1 {font-size:2em; margin-bottom:20px; color:var(--dark-color);}
.error-message p {font-size:1.1em; color:#666;}

/* ========================================
   PAGES STATIQUES
   ======================================== */

.static-page-content {background:var(--white); border-radius:12px; padding:60px 40px; box-shadow:0 4px 20px rgba(0, 0, 0, 0.08); margin-bottom:40px;}
.static-page-content h1 {font-size:2.5em; color:var(--dark-color); margin-bottom:30px; text-align:center;}
.page-content {font-size:1.1em; line-height:1.8; color:var(--text-color);}
.page-content h2 {font-size:1.8em; color:var(--dark-color); margin-top:40px; margin-bottom:20px;}
.page-content h3 {font-size:1.4em; color:var(--dark-color); margin-top:30px; margin-bottom:15px;}
.page-content p {margin-bottom:20px;}
.page-content ul, .page-content ol {margin-bottom:20px; padding-left:30px;}
.page-content li {margin-bottom:10px;}
.page-content a {color:var(--primary-color); text-decoration:none; border-bottom:1px solid transparent; transition:var(--transition);}
.page-content a:hover {border-bottom-color:var(--primary-color);}
.page-content img {max-width:100%; height:auto; border-radius:8px; margin:20px 0;}

/* ========================================
   DISCLAIMER MODAL
   ======================================== */

.disclaimer-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.9); z-index:9999; opacity:0; transition:opacity 0.3s ease;}
.disclaimer-overlay.show {opacity:1;}
.disclaimer-modal {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.9); background:var(--white); border-radius:20px; padding:60px 40px; max-width:500px; width:90%; z-index:10000;opacity:0; transition:all 0.3s ease; box-shadow:0 20px 60px rgba(0, 0, 0, 0.5);}
.disclaimer-modal.show {opacity:1; transform:translate(-50%, -50%) scale(1);}
.disclaimer-content {text-align:center;}
.disclaimer-site-name {font-size:1.8em; color:var(--primary-color); margin-bottom:20px; font-weight:bold;}
.disclaimer-title {font-size:1.5em; color:var(--dark-color); margin-bottom:30px;}
.disclaimer-buttons {display:flex; gap:20px; justify-content:center; margin-bottom:20px;}
.disclaimer-btn {padding:15px 50px; font-size:1.2em; font-weight:bold; border:none; border-radius:50px; cursor:pointer; transition:var(--transition);}
.disclaimer-btn-yes {background:var(--success-color); color:var(--white);}
.disclaimer-btn-yes:hover {transform:translateY(-2px); box-shadow:0 8px 20px rgba(39, 174, 96, 0.4);}
.disclaimer-btn-no {background:var(--danger-color); color:var(--white);}
.disclaimer-btn-no:hover {transform:translateY(-2px); box-shadow:0 8px 20px rgba(231, 76, 60, 0.4);}
.disclaimer-text {font-size:0.9em; color:#666; line-height:1.6;}
body.disclaimer-active {overflow:hidden;}

/* ========================================
   LAYOUT AVEC WIDGETS DROITE
   ======================================== */

.widget-box {background:var(--white); border-radius:12px; margin-bottom:20px; box-shadow:0 2px 10px rgba(0, 0, 0, 0.05); overflow:hidden;}
.widget-ad {}


/* ========================================
   LAYOUT ROUE + ASIDE + LOTS
   ======================================== */

.page-layout-with-widgets {display:grid; grid-template-columns:1fr 320px; grid-template-rows:auto auto; gap:20px; margin-top:20px;}
.main-content-wheel {grid-column:1; grid-row:1;}
.sidebar-right-widgets {grid-column:2; grid-row:1; width:320px;}
.prizes-list-full-width {grid-column:1 / -1; grid-row:2; margin-top:20px;}
.prizes-list-full-width h2 {text-align:center; font-size:2em; color:var(--dark-color); margin-bottom:40px;}
.prizes-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(450px, 1fr)); gap:20px;}

.prize-card {border-radius:12px; padding:20px; box-shadow:0 4px 15px rgba(0, 0, 0, 0.2); transition:var(--transition); min-height:80px; display:flex; align-items:center; justify-content:center; gap:15px}
.prize-card:hover {transform:translateY(-5px); box-shadow:0 8px 25px rgba(0, 0, 0, 0.3);}
.prize-image {flex-shrink:0; width:100%; max-width:100px; border-radius:8px; overflow:hidden; background:rgba(255, 255, 255, 0.2); display:flex; align-items:center; justify-content:center;}
.prize-image img {width:100%; height:100%; object-fit:cover;}
.prize-info {width:100%;}
.prize-name {font-size:1.6em;}
.prize-description {font-size:0.95em; line-height:1.4;}

.error-404 {text-align:center; padding:100px 20px;}
.error-404-icon {font-size:8em; margin-bottom:30px; animation:spin404 3s ease-in-out infinite;}
.error-404-title {font-size:2.5em; color:var(--dark-color); margin-bottom:20px;}
.error-404-text {font-size:1.2em; color:#666; margin-bottom:40px;}
.btn-home {display:inline-block; background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color:var(--white); padding:15px 40px; border-radius:50px; text-decoration:none; font-weight:bold; font-size:1.1em; transition:var(--transition);}
.btn-home:hover {transform:translateY(-3px); box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);}
@keyframes spin404 {
    0%, 100% { transform:rotate(0deg); }
    25% { transform:rotate(10deg); }
    75% { transform:rotate(-10deg); }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width:1200px) {
    .page-layout-with-widgets {grid-template-columns:1fr; grid-template-rows:auto auto auto;}
    .main-content-wheel {grid-column:1; grid-row:1;}
    /* Lots en 2ème position */
    .prizes-list-full-width {grid-column:1; grid-row:2;}
    /* Aside en 3ème position */
    .sidebar-right-widgets {grid-column:1; grid-row:3; width:100%;}
}

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

@media (max-width:1200px) {
    
    .main-content-wheel {
        max-width:100%;
    }
}

@media (max-width:768px) {
    .site-name {font-size:1.5em;}
    .header-logo {align-items:center;}
    .footer-blocks-2, .footer-blocks-3, .footer-blocks-4 {grid-template-columns:1fr;}
    .error-message {padding:40px 20px;}
    .error-message h1 {font-size:1.5em;}
    .disclaimer-modal {padding:40px 20px;}
    .disclaimer-site-name {font-size:1.5em;}
    .disclaimer-title {font-size:1.3em;}
    .disclaimer-buttons {flex-direction:column; gap:15px;}
    .disclaimer-btn {width:100%;}
}

@media (max-width:480px) {
    .spin-button {border:3px solid var(--white);}
}