.elementor-11757 .elementor-element.elementor-element-e8a895a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11757 .elementor-element.elementor-element-22c8812 > .elementor-widget-container{padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-22c8812 *//* ================= 1. STYLE GÉNÉRAL ================= */
    :root {
        --c-orange: #F39200;
        --c-blue: #36A9E1;
        --c-purple: #662483;
        --c-dark: #1a1a1a;
        --c-bg: #fdfdfd;
        --c-red: #E30613;
        --c-yellow: #FFDE07;
    }
    
    html { margin: 0; padding: 0; width: 100%; height: 100%; }
    
    .body6 { margin: 0; padding: 0; width: 100%; height: 100%; }
    
    .body6 { 
        font-family: 'Montserrat', sans-serif; 
        background: var(--c-bg); 
        overflow: hidden; 
    }
    
    /* FOND GRILLE & STRUCTURE */
    .hero-wrapper {
        position: relative; 
        width: 100%; 
        min-height: 100vh; 
        height: 100%;
        background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
        background-size: 50px 50px;
        display: flex; 
        align-items: center; 
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    /* BOUTON RETOUR SITE */
    .site-back-btn {
        position: absolute; top: 40px; left: 40px; z-index: 50;
        background: white; color: var(--c-dark); border: 2px solid var(--c-dark);
        padding: 12px 25px; border-radius: 50px; text-decoration: none;
        font-family: 'Syne', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 0.9rem;
        box-shadow: 4px 4px 0px rgba(0,0,0,0.1); transition: all 0.3s ease;
    }
    .site-back-btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0px var(--c-orange); border-color: var(--c-orange); }

    /* DÉCORATION CUBES */
    .cube-float { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(10px 15px 5px rgba(0,0,0,0.1)); animation: float 6s ease-in-out infinite alternate; }
    .cf-1 { top: 10%; left: 5%; width: 100px; } 
    .cf-2 { bottom: 15%; right: 10%; width: 130px; animation-delay: 1s; } 
    .cf-3 { bottom: 10%; left: 15%; width: 80px; animation-delay: 2s; }
    @keyframes float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-20px) rotate(5deg); } }

    /* ================= 2. CARTE PRINCIPALE (MENU) ================= */
    .glass-card {
        position: relative; z-index: 10;
        background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
        border-radius: 30px; padding: 50px; 
        max-width: 900px; width: 100%;
        box-shadow: 0 30px 60px rgba(0,0,0,0.1); text-align: center;
        transition: 0.3s; transform: none;
    }
    
    .title-main { font-family: 'Syne', sans-serif; font-size: 3.5rem; font-weight: 900; color: var(--c-dark); line-height: 1; margin: 0 0 20px 0; text-transform: uppercase; }
    .txt-outline { -webkit-text-stroke: 2px var(--c-dark); color: transparent; }
    .txt-pop { color: var(--c-orange); }
    .subtitle { font-size: 1.1rem; line-height: 1.6; max-width: 650px; margin: 0 auto 40px auto; color: #666; }

    .games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
    .game-btn {
        background: white; border: 2px solid var(--c-dark); border-radius: 15px;
        padding: 20px 10px; cursor: pointer; transition: 0.3s;
        display: flex; flex-direction: column; align-items: center;
        box-shadow: 5px 5px 0px var(--c-dark);
    }
    .game-btn:hover { transform: translateY(-5px); box-shadow: 8px 8px 0px var(--c-orange); border-color: var(--c-orange); }
    .gb-icon { font-size: 2rem; margin-bottom: 10px; }
    .gb-name { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; }

    /* ================= 3. GAME LAYERS (MODALES) ================= */
    .game-layer {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: #fff; z-index: 1000; display: none;
        flex-direction: column; align-items: center; justify-content: center;
        overflow: hidden;
    }
    .game-layer.active { display: flex; animation: slideUp 0.3s ease-out; }
    @keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

    .back-btn {
        position: absolute; top: 20px; left: 20px;
        background: var(--c-dark); color: white; padding: 10px 20px;
        border-radius: 30px; font-weight: bold; cursor: pointer; z-index: 200;
        font-size: 0.9rem; text-transform: uppercase;
    }
    .back-btn:hover { background: var(--c-orange); }

    /* --- JEU 1 : INFINITE CRAFT --- */
    .craft-container { width: 100%; height: 100%; display: flex; flex-direction: column; }
    .craft-workspace { flex: 1; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(#ddd 1px, transparent 1px); background-size: 20px 20px; position: relative; }
    .craft-result { font-size: 2rem; font-weight: 800; color: var(--c-blue); text-transform: uppercase; min-height: 50px; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); text-align: center; padding: 0 20px;}
    .shake { animation: shake 0.5s; }
    @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
    .craft-inventory { height: 40%; background: #f8f8f8; border-top: 2px solid #eee; padding: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; overflow-y: auto; }
    .element { padding: 8px 16px; background: white; border: 1px solid #ccc; border-radius: 50px; cursor: pointer; font-size: 0.9rem; font-weight: 600; box-shadow: 2px 2px 0px rgba(0,0,0,0.1); user-select: none; transition: 0.2s; display: flex; align-items: center; gap: 5px; }
    .element:hover { transform: translateY(-2px); border-color: var(--c-orange); }
    .element.selected { background: var(--c-dark); color: white; border-color: var(--c-dark); transform: scale(0.95); }
    .craft-combine-area { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: white; padding: 10px 20px; border-radius: 20px; border: 1px solid #ddd; font-size: 0.9rem; color: #888; white-space: nowrap; }

    /* --- JEU 2 : SQUA-RDLE --- */
    .wordle-container { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 500px;}
    .wordle-legend { display: flex; gap: 20px; margin-bottom: 5px; font-size: 0.8rem; font-weight: bold; }
    .legend-item { display: flex; align-items: center; gap: 5px; }
    .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    .dot-correct { background: var(--c-orange); } .dot-present { background: var(--c-blue); }
    .wordle-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; }
    .w-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .w-cell { width: 45px; height: 45px; border: 2px solid #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
    .w-correct { background: var(--c-orange); color: white; border-color: var(--c-orange); } .w-present { background: var(--c-blue); color: white; border-color: var(--c-blue); } .w-absent { background: #787c7e; color: white; border-color: #787c7e; }
    .keyboard { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
    .kb-row { display: flex; justify-content: center; gap: 4px; }
    .kb-key { padding: 12px 10px; background: #d3d6da; border-radius: 4px; min-width: 25px; text-align: center; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 0.9rem; user-select: none; }
    .kb-key:active { background: #bbb; } .kb-key.big { padding: 12px 15px; font-size: 0.8rem; }

    /* --- JEU 3 : SQUARE TRIS (Tetris) --- */
   #tetrisCanvas { border: 4px solid var(--c-dark); background: #f4f4f4; display: block; margin: 0 auto; }
    .tetris-ui { position: absolute; top: 20px; right: 20px; text-align: right; }
    .tetris-score { font-family: 'VT323', monospace; font-size: 2rem; color: var(--c-orange); font-weight: bold; }
    .tetris-controls { display: none; margin-top: 20px; gap: 15px; justify-content: center; width: 100%; }
    .t-btn { width: 60px; height: 60px; border-radius: 50%; background: #eee; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
    .t-btn:active { background: var(--c-orange); color: white; border-color: var(--c-orange); }
    .t-btn-rotate { background: var(--c-blue); color: white; border-color: var(--c-blue); }

    /* --- JEU 4 : PIXEL PAINTER --- */
    .painter-ui { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; align-items: center; }
    #pixelCanvas { border: 4px solid #1a1a1a; cursor: crosshair; box-shadow: 10px 10px 0px rgba(0,0,0,0.1); image-rendering: pixelated; background-color: white; max-width: 90vw; }
    .palette-row { display: flex; gap: 8px; background: #f0f0f0; padding: 8px; border-radius: 50px; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 95vw; }
    .color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); }
    .color-swatch.active { transform: scale(1.2); border-color: #000; box-shadow: none; }
    .color-picker-wrapper { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); border: 2px solid white; }
    #customColorPicker { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; padding: 0; margin: 0; border: none; cursor: pointer; }
    .rainbow-bg { background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red); }
    .tools-row { display: flex; gap: 10px; }
    .btn-tool { padding: 8px 15px; font-size: 0.85rem; cursor: pointer; background: white; border: 1px solid #1a1a1a; border-radius: 20px; font-weight: bold; transition: 0.2s; }
    .idea-bubble { margin-top: 5px; font-style: italic; color: var(--c-blue); font-weight: bold; min-height: 20px; font-size: 0.9rem; text-align: center;}

    /* ================= RESPONSIVE MOBILE ================= */
    @media (max-width: 900px) {
        body { overflow-y: auto; }
        .hero-wrapper { height: auto; display: block; padding-top: 60px; padding-bottom: 50px; }
        .cube-float { display: none; }
        
        .glass-card { margin: 0 auto; width: 90%; padding: 30px 20px; }
        .title-main { font-size: 1.6rem; }
        .games-grid { grid-template-columns: 1fr; gap: 15px; }
        .game-btn { flex-direction: row; justify-content: center; gap: 15px; padding: 15px; }
        .gb-icon { margin-bottom: 0; font-size: 1.8rem; }
        
        .site-back-btn, .back-btn { top: 15px; left: 15px; padding: 8px 16px; font-size: 0.75rem; z-index: 2000; }

        /* CRAFT */
        .craft-combine-area { top: 80px !important; width: 80%; white-space: normal; text-align: center; }
        .craft-workspace { height: 55%; align-items: flex-start; padding-top: 100px; }
        .craft-inventory { height: 45%; }

        /* TETRIS MOBILE */
        .tetris-controls { display: flex; } /* Affiche les boutons */
        #game-tetris { justify-content: flex-start; padding-top: 60px; }
        #tetrisCanvas { width: 240px; height: 400px; } /* Taille adaptée mobile */

        /* AUTRES JEUX */
        .kb-key { padding: 15px 4px; font-size: 0.8rem; min-width: 18px; }
        #pixelCanvas { width: 300px; height: 300px; }
        .painter-ui { margin-top: 60px; }
        
        .craft-result{
            margin-top: 35%;
        }
    }
    
     .craft-topbar{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:12px;
        }

        .craft-reset-btn{
            border:none;
            cursor:pointer;
            padding:10px 14px;
            border-radius:14px;
            font-weight:700;
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 26px rgba(0,0,0,.14);
            transition: transform .15s ease, opacity .15s ease;
            color: black;
        }

        .craft-reset-btn:hover{ transform: translateY(-1px); opacity:.95; background-color: #F39200; }
        .craft-reset-btn:active{ transform: translateY(0px); opacity:.85; }/* End custom CSS */