.elementor-41 .elementor-element.elementor-element-ea860f1{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-41 .elementor-element.elementor-element-891d51c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -80px) 0px;padding:44px 0px 0px 0px;text-align:center;}.elementor-41 .elementor-element.elementor-element-891d51c .elementor-heading-title{font-family:"OldGrowth", Sans-serif;font-size:28px;font-weight:600;text-transform:lowercase;line-height:37px;-webkit-text-stroke-width:0px;stroke-width:0px;-webkit-text-stroke-color:#000;stroke:#000;text-shadow:0px 0px 0px rgba(0, 0, 0, 0);color:#FFFFFF;}.elementor-41 .elementor-element.elementor-element-c29b56b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -160px) 0px;padding:100px 0px 0px 0px;text-align:center;}.elementor-41 .elementor-element.elementor-element-c29b56b .elementor-heading-title{font-family:"Gopher", Sans-serif;font-size:27px;font-weight:400;color:#FFFFFF;}.elementor-41 .elementor-element.elementor-element-300acd5{--display:flex;--min-height:306px;--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;}.elementor-41 .elementor-element.elementor-element-300acd5:not(.elementor-motion-effects-element-type-background), .elementor-41 .elementor-element.elementor-element-300acd5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://restaurants.roru.be/wp-content/uploads/2025/09/poke-sushi-rice-bowl-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}@media(min-width:1025px){.elementor-41 .elementor-element.elementor-element-300acd5:not(.elementor-motion-effects-element-type-background), .elementor-41 .elementor-element.elementor-element-300acd5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:767px){.elementor-41 .elementor-element.elementor-element-ea860f1{--min-height:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-41 .elementor-element.elementor-element-891d51c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 1px 5px 1px;}.elementor-41 .elementor-element.elementor-element-891d51c .elementor-heading-title{font-size:18px;line-height:30px;letter-spacing:-0.3px;}.elementor-41 .elementor-element.elementor-element-c29b56b{padding:0px 10px 0px 10px;text-align:center;}.elementor-41 .elementor-element.elementor-element-c29b56b .elementor-heading-title{font-size:13px;line-height:1.3em;}.elementor-41 .elementor-element.elementor-element-300acd5{--min-height:200px;}}/* Start custom CSS for html, class: .elementor-element-2fa0018 */:root {
            --roru-bg: #d21c1b;
            --roru-text: #f5e9d1;
            --roru-accent: #ffd4a3;
            --roru-dark: #a01514;
            --roru-light: #ff2d2c;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        .sectionpoiss {

            padding: 100px 20px;
            overflow: hidden;
        }


        h1 {
            font-size: 3.5em;
            font-weight: 900;
            text-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        h2 {
            font-size: 2em;
            opacity: 0.9;
        }

        /* 1. ÉCOLE DE POISSONS KOI */
        .koi-pond {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
        }

        .koi-fish {
            position: absolute;
            width: 120px;
            height: 60px;
            animation: swim 20s infinite ease-in-out;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
        }

        .koi-fish:nth-child(1) { 
            top: 25%; 
            animation-duration: 25s;
            animation-delay: 0s;
        }
        .koi-fish:nth-child(2) { 
            top: 40%; 
            animation-duration: 30s;
            animation-delay: -5s;
        }
        .koi-fish:nth-child(3) { 
            top: 60%; 
            animation-duration: 22s;
            animation-delay: -10s;
        }
        .koi-fish:nth-child(4) { 
            top: 80%; 
            animation-duration: 28s;
            animation-delay: -15s;
        }
        .koi-fish:nth-child(5) { 
            top:50%; 
            animation-duration: 26s;
            animation-delay: -20s;
        }

        @keyframes swim {
            0% {
                left: -150px;
                transform: scaleX(1) translateY(0);
            }
            25% {
                transform: scaleX(1) translateY(-30px) rotate(-5deg);
            }
            50% {
                left: 100%;
                transform: scaleX(1) translateY(30px) rotate(5deg);
            }
            51% {
                transform: scaleX(-1) translateY(30px) rotate(5deg);
            }
            75% {
                transform: scaleX(-1) translateY(-20px) rotate(-3deg);
            }
            100% {
                left: -150px;
                transform: scaleX(-1) translateY(0);
            }
        }

        .koi-body {
            fill: var(--roru-text);
            opacity: 0.9;
        }

        .koi-fins {
            fill: var(--roru-accent);
            opacity: 0.7;
            animation: fin-wave 2s ease-in-out infinite;
        }

        @keyframes fin-wave {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(10deg); }
        }

        /* 2. VAGUES JAPONAISES MULTICOUCHES */
        .wave-container {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 300px;
            overflow: hidden;
        }

        .wave-layer {
            position: absolute;
            bottom: 0;
            width: 200%;
            height: 100%;
            animation: wave-motion 10s linear infinite;
        }

        .wave-layer:nth-child(1) {
            animation-duration: 7s;
            opacity: 0.5;
            z-index: 3;
        }
        .wave-layer:nth-child(2) {
            animation-duration: 10s;
            animation-delay: -2s;
            opacity: 0.7;
            z-index: 2;
        }
        .wave-layer:nth-child(3) {
            animation-duration: 13s;
            animation-delay: -5s;
            opacity: 0.9;
            z-index: 1;
        }

        @keyframes wave-motion {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* 3. BULLES FLOTTANTES */
        .bubble-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .bubble {
            position: absolute;
            bottom: -100px;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent);
            border-radius: 50%;
            animation: bubble-rise 10s infinite ease-in-out;
        }

        @keyframes bubble-rise {
            0% {
                bottom: -100px;
                transform: translateX(0) scale(1);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
            }
            90% {
                opacity: 0.6;
            }
            100% {
                bottom: 100%;
                transform: translateX(100px) scale(1.5);
                opacity: 0;
            }
        }

        .bubble:nth-child(1) { left: 10%; width: 20px; height: 20px; animation-duration: 8s; animation-delay: 0s; }
        .bubble:nth-child(2) { left: 20%; width: 35px; height: 35px; animation-duration: 12s; animation-delay: 2s; }
        .bubble:nth-child(3) { left: 35%; width: 15px; height: 15px; animation-duration: 7s; animation-delay: 1s; }
        .bubble:nth-child(4) { left: 50%; width: 25px; height: 25px; animation-duration: 10s; animation-delay: 3s; }
        .bubble:nth-child(5) { left: 65%; width: 30px; height: 30px; animation-duration: 9s; animation-delay: 4s; }
        .bubble:nth-child(6) { left: 80%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: 5s; }
        .bubble:nth-child(7) { left: 90%; width: 22px; height: 22px; animation-duration: 8s; animation-delay: 2.5s; }

        /* 4. ALGUES ONDULANTES */
        .seaweed-container {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        .seaweed {
            position: absolute;
            bottom: 0;
            transform-origin: bottom center;
            animation: sway 4s ease-in-out infinite;
        }

        .seaweed:nth-child(1) { left: 10%; animation-delay: 0s; }
        .seaweed:nth-child(2) { left: 25%; animation-delay: 0.5s; }
        .seaweed:nth-child(3) { left: 40%; animation-delay: 1s; }
        .seaweed:nth-child(4) { left: 60%; animation-delay: 1.5s; }
        .seaweed:nth-child(5) { left: 75%; animation-delay: 2s; }
        .seaweed:nth-child(6) { left: 90%; animation-delay: 2.5s; }

        @keyframes sway {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }

        /* 5. BANC DE PETITS POISSONS */
        .school-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .fish-school {
            position: absolute;
            top: 30%;
            animation: school-swim 40s linear infinite;
        }

        @keyframes school-swim {
            0% { left: -300px; }
            100% { left: 100%; }
        }

        .small-fish {
            position: absolute;
            width: 30px;
            height: 15px;
            animation: individual-swim 3s ease-in-out infinite;
        }

        @keyframes individual-swim {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-5px) rotate(-2deg); }
            75% { transform: translateY(5px) rotate(2deg); }
        }

        /* 6. VAGUE GÉANTE HOKUSAI */
        .hokusai-wave {
            position: absolute;
            bottom: -50px;
            right: -100px;
            width: 600px;
            height: 400px;
            animation: hokusai-crash 15s ease-in-out infinite;
            transform-origin: bottom right;
        }

        @keyframes hokusai-crash {
            0%, 100% {
                transform: rotate(0deg) translateX(0);
                opacity: 0.3;
            }
            50% {
                transform: rotate(-10deg) translateX(-100px);
                opacity: 0.8;
            }
        }

        /* 7. EFFET COURANT MARIN */
        .current-effect {
            position: absolute;
            width: 150%;
            height: 100%;
            top: 0;
            left: -25%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 100px,
                rgba(245, 233, 209, 0.03) 100px,
                rgba(245, 233, 209, 0.03) 200px
            );
            animation: current-flow 20s linear infinite;
        }

        @keyframes current-flow {
            0% { transform: translateX(0); }
            100% { transform: translateX(200px); }
        }

        /* Info box style */
        .info-box {
            position: relative;
            background: rgba(162, 21, 20, 0.5);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 20px;
            max-width: 600px;
            margin: 50px auto;
            text-align: center;
            z-index: 10;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            border: 2px solid rgba(245, 233, 209, 0.2);
        }

        /* Responsive */
        @media (max-width: 768px) {
            h1 { font-size: 2.5em; }
            h2 { font-size: 1.5em; }
            .koi-fish { width: 80px; height: 40px; }
            .hokusai-wave { width: 400px; height: 300px; }
            .info-box { padding: 20px; margin: 20px; }
        }/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'OldGrowth';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://restaurants.roru.be/wp-content/uploads/2025/07/OldGrowth-Regular.woff') format('woff');
}
/* End Custom Fonts CSS */