@font-face { font-family:'DrukWideBold'; src:url('../fonts/DrukWideBold.ttf') format('truetype'); font-weight:bold; font-style:normal;} * { margin:0; padding:0; box-sizing:border-box;}  html,body { overflow-x:hidden;} :root { --primary-yellow:#FDFF00; --bright-yellow:#FDFF00; --dark-black:#000000; --pure-white:#FFFFFF; --light-gray:#F5F5F5;} html { font-size:16px; overflow-x:hidden;} body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background-color:var(--pure-white); color:var(--dark-black); line-height:1.6; overflow-x:hidden; margin:0; padding:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}  .hero-section + * { margin-top:0 !important;}  @media (max-width:48rem) { html,body { margin:0; padding:0; width:100%; max-width:100%; overflow-x:hidden; }    .hero-section { display:block; position:relative; }  .hero-section, .horaires-section, .events-section, .carte-section { margin:0; padding-top:60px; padding-bottom:60px; }  .hero-section { padding:0; }   .header-container, .events-container, .carte-container, .collage-container, .footer-container, .horaires-container { margin:0 auto; box-sizing:border-box; }}  .header { background-color:var(--dark-black); padding:20px 0; position:fixed; width:100%; top:0; z-index:1000; transition:transform 0.3s ease;} .header.hidden { transform:translateY(-100%);} .header-container { max-width:1400px; margin:0 auto; padding:0 40px;} .navbar { display:grid; grid-template-columns:auto auto auto auto auto auto; align-items:center; width:100%; gap:40px; justify-content:center;} .nav-menu { list-style:none; display:flex; gap:30px;} .nav-left { justify-self:start; padding-left:0;} .nav-right-menu { list-style:none; display:flex; gap:30px;} .nav-center-left { justify-self:end; display:flex; align-items:center;} .cavagood-image { height:50px; width:auto; transition:transform 0.3s ease;} .cavagood-image:hover { transform:scale(1.05);} .logo-container { display:flex; flex-direction:column; align-items:center; gap:5px; justify-self:center; transition:all 0.3s ease; cursor:pointer;} .nav-center-right { justify-self:start; display:flex; align-items:center;} .yapasdgalere-image { height:50px; width:auto; transition:transform 0.3s ease;} .yapasdgalere-image:hover { transform:scale(1.05);} .nav-right { justify-self:end; display:flex; align-items:center; gap:20px; margin:0; padding:0;} .nav-link { color:var(--pure-white); text-decoration:none; font-family:'DrukWideBold',sans-serif; font-weight:700; font-size:0.875rem; letter-spacing:0.03125rem; transition:all 0.3s ease; text-transform:uppercase; padding:0.5rem 0.3125rem; position:relative; min-height:2.75rem; display:flex; align-items:center;} .nav-link::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--pure-white); transform:scaleX(1); opacity:1; transition:all 0.3s ease;} .nav-link.active::after { transform:scaleX(1); opacity:1; background:var(--pure-white);} .nav-link:hover { opacity:0.9;} .nav-link:hover::after { opacity:1; background:var(--pure-white);} .logo-container { display:flex; flex-direction:column; align-items:center; gap:5px; justify-self:center; transition:all 0.3s ease; cursor:pointer;} .logo-container:hover { transform:translateY(-3px);} .logo-container:hover .logo { transform:scale(1.1) rotate(5deg); filter:drop-shadow(0 5px 15px rgba(0,0,0,0.3));} .logo-container:hover .logo-subtitle { letter-spacing:3px; color:#222;} .logo-container:hover .logo-pattern { letter-spacing:4px; transform:scaleX(1.2);} .logo { height:120px; width:auto; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); filter:drop-shadow(0 2px 5px rgba(0,0,0,0.2));} .logo-subtitle { font-size:12px; font-weight:700; letter-spacing:2px; color:var(--primary-yellow); transition:all 0.3s ease;} .logo-pattern { font-size:10px; letter-spacing:2px; color:var(--primary-yellow); transition:all 0.3s ease;} .nav-right { justify-self:end; display:flex; align-items:center;} .social-icon { color:var(--pure-white); font-size:1.5rem; transition:transform 0.3s ease; min-height:2.75rem; min-width:2.75rem; display:flex; align-items:center; justify-content:center; text-decoration:none; line-height:1;} .social-icon:hover { transform:scale(1.1);}  .hero-section { margin-top:130px; position:relative; height:100vh; min-height:800px; overflow:hidden; background:var(--dark-black); margin-bottom:0; display:block;} .hero-video { position:relative; width:100%; height:100%; display:block;} .hero-video-element { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; max-width:100%;}  .mobile-video { display:none;} .desktop-video { display:block;}  .mobile-sound-toggle { position:absolute; top:1rem; right:1rem; background:rgba(0,0,0,0.7); border:2px solid var(--primary-yellow); color:white; border-radius:50%; width:3rem; height:3rem; font-size:1.2rem; cursor:pointer; z-index:10; display:none; transition:all 0.3s ease;} .mobile-sound-toggle:hover { background:rgba(0,0,0,0.9); transform:scale(1.1);}  @media (max-width:48rem) { .mobile-video { display:block; }  .desktop-video { display:none; }  .mobile-sound-toggle { display:block; }  .carte-section { padding-bottom:0; margin-bottom:0; }  .carte-container { padding-bottom:0; margin-bottom:0; }  .carte-grid { margin-bottom:0; }}    .horaires-section { background-image:url('../images/joyzebre.svg'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; padding:80px 0; position:relative; margin-top:0; clear:both;} .horaires-section::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:1;} .horaires-container { max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:2; display:flex; align-items:center; gap:60px;} .horaires-left { flex:1; text-align:center;} .horaires-right { flex:1; text-align:center;} .horaires-image { max-width:80%; height:auto; border-radius:15px; box-shadow:0 15px 40px rgba(253,255,0,0.3); transition:all 0.3s ease; border:3px solid var(--primary-yellow);} .horaires-image:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 20px 50px rgba(253,255,0,0.5);} .jeux-title { font-family:'DrukWideBold',sans-serif; font-size:clamp(1.8rem,4vw,2.5rem); color:var(--primary-yellow); margin-bottom:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.0625rem;} .jeux-subtitle { color:rgba(255,255,255,0.8); font-size:clamp(1rem,2.5vw,1.3rem); margin-bottom:1.5625rem; font-weight:500;} .jeux-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:600px; margin:0 auto;} .jeu-image { width:100%; height:200px; object-fit:cover; border:3px solid var(--primary-yellow); background:var(--pure-white); transition:all 0.3s ease; cursor:pointer; position:relative; overflow:hidden; border-radius:15px; box-shadow:0 15px 40px rgba(253,255,0,0.3);} .jeu-image:nth-child(1),.jeu-image:nth-child(2),.jeu-image:nth-child(3),.jeu-image:nth-child(4) { height:280px;} .jeu-image:hover { transform:translateY(-10px) scale(1.02); z-index:10; box-shadow:0 20px 50px rgba(253,255,0,0.5);}  .jeu-modal { display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.9); justify-content:center; align-items:center; animation:fadeIn 0.3s ease;} .jeu-modal-content { position:relative; max-width:90%; max-height:90%; text-align:center;}  .modal-jeu-image { max-width:100%; max-height:80vh; object-fit:contain; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.5); cursor:pointer; transition:all 0.3s ease;} .modal-jeu-image:hover { transform:scale(1.02);}   .events-section { background:linear-gradient(135deg,var(--dark-black) 0%,#1a1a1a 100%); padding:0; position:relative;} .events-section::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--primary-yellow);} .events-container { max-width:1400px; margin:0 auto; padding:clamp(3rem,6vw,4rem) 40px;} .events-title { font-family:'DrukWideBold',sans-serif; font-size:clamp(2rem,5vw,4rem); font-weight:900; color:var(--primary-yellow); text-align:center; letter-spacing:clamp(0.0625rem,0.3vw,0.3125rem); text-transform:uppercase; margin-bottom:1.25rem; text-shadow:0.1875rem 0.1875rem 0 rgba(255,215,0,0.3); word-wrap:break-word; overflow-wrap:break-word; hyphens:auto;} .events-subtitle { text-align:center; color:rgba(255,255,255,0.7); font-size:clamp(1rem,2.5vw,1.2rem); margin-bottom:3.75rem; font-style:italic;} .events-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:30px; margin-bottom:80px;} .no-events { grid-column:1 / -1; text-align:center; padding:60px 40px; background:linear-gradient(135deg,rgba(253,255,0,0.1) 0%,rgba(253,255,0,0.05) 100%); border:2px dashed rgba(253,255,0,0.3); border-radius:20px; margin:20px 0;} .no-events-logo { width:150px; height:auto; margin-bottom:20px; opacity:0.8; animation:bounce 2s infinite;} .no-events-title { font-family:var(--font-secondary); font-size:1.8rem; color:var(--dark-black); margin-bottom:15px; font-weight:600;} .no-events-text { font-size:1.1rem; color:var(--text-secondary); margin-bottom:30px; line-height:1.6;}  @keyframes bounce { 0%,20%,50%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-10px); } 60% { transform:translateY(-5px); }} .event-card { background:rgba(255,255,255,0.05); border:2px solid transparent; border-radius:15px; padding:25px; transition:all 0.3s ease; position:relative; overflow:hidden; display:flex; gap:20px;} .event-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,215,0,0.1),transparent); transition:left 0.5s ease;} .event-card:hover { border-color:var(--primary-yellow); transform:translateY(-5px); background:rgba(255,215,0,0.1); box-shadow:0 10px 30px rgba(255,215,0,0.2);} .event-card:hover::before { left:100%;} .event-date { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--primary-yellow); color:var(--dark-black); border-radius:10px; padding:15px 10px; min-width:70px; flex-shrink:0;} .event-day { font-size:clamp(1.5rem,3vw,2rem); font-weight:900; line-height:1;} .event-month { font-size:clamp(0.7rem,1.5vw,0.8rem); font-weight:700; letter-spacing:0.0625rem;} .event-content { flex:1; display:flex; flex-direction:column; justify-content:space-between; min-height:120px;} .event-main { flex:1;} .event-bottom { margin-top:auto;} .event-name { font-family:'DrukWideBold',sans-serif; font-size:clamp(1.1rem,2.5vw,1.3rem); font-weight:700; color:var(--primary-yellow); text-transform:uppercase; letter-spacing:0.0625rem; margin-bottom:0.3125rem;} .event-description { color:rgba(255,255,255,0.8); font-size:clamp(0.8rem,1.5vw,0.9rem); line-height:1.5; margin-bottom:0.625rem;} .event-price { display:inline-block; background:rgba(255,215,0,0.1); border:0.0625rem solid var(--primary-yellow); border-radius:1.25rem; padding:0.5rem 1rem; margin-bottom:0.5rem;} .price-label { font-size:0.7rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:1px; margin-bottom:2px; display:block;} .price-value { font-size:clamp(0.9rem,1.5vw,1rem); font-weight:700; color:var(--primary-yellow);} .event-time { display:flex; align-items:center; gap:0.5rem; color:var(--primary-yellow); font-size:clamp(0.8rem,1.5vw,0.9rem); font-weight:600; padding-top:0.625rem; border-top:0.0625rem solid rgba(255,215,0,0.2);} .event-time i { font-size:0.8rem;} .events-cta { text-align:center; border-top:1px solid rgba(255,215,0,0.2); padding-top:40px;} .events-info { color:rgba(255,255,255,0.8); font-size:clamp(1rem,2vw,1.1rem); margin-bottom:1.875rem; font-style:italic;} .events-social { display:flex; justify-content:center; gap:30px;} .event-social-btn { display:flex; align-items:center; gap:0.625rem; color:var(--primary-yellow); text-decoration:none; font-weight:600; font-size:clamp(0.9rem,2vw,1rem); padding:0.9375rem 1.5625rem; border:0.125rem solid var(--primary-yellow); border-radius:3.125rem; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:0.0625rem; min-height:2.75rem;} .event-social-btn:hover { background:var(--primary-yellow); color:var(--dark-black); transform:translateY(-2px); box-shadow:0 5px 15px rgba(255,215,0,0.3);} .event-social-btn i { font-size:1.2rem;}    .photo-collage { background:var(--pure-white); padding:0; position:relative; margin-top:0; margin-bottom:0;} .stripe-background { position:relative; background-image:url('../images/joyzebre.svg'); background-size:cover; background-position:center; background-repeat:no-repeat; padding:40px 0;} .collage-container { max-width:1400px; margin:0 auto; padding:0 40px; position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:20px; align-items:center;} .collage-item { position:relative; overflow:hidden; border:0.1875rem solid var(--dark-black); background:var(--pure-white); transform:rotate(-2deg); transition:transform 0.3s ease;} .collage-item:nth-child(even) { transform:rotate(2deg);} .collage-item:hover { transform:rotate(0deg) scale(1.05); z-index:10;} .collage-item img { width:100%; height:100%; max-width:100%; object-fit:cover; display:block;}  .item-1 { grid-column:1; grid-row:1; height:300px;}.item-2 { grid-column:2; grid-row:1; height:400px;}.item-3 { grid-column:3; grid-row:1; height:350px;}  .item-4 { grid-column:1; grid-row:2; height:250px;}.spotify-player { grid-column:2; grid-row:2; height:auto;}.item-6 { grid-column:3; grid-row:2; height:400px;}  @media (min-width:48rem) { .item-5 { display:none; }} .spotify-player { background:var(--dark-black); border-radius:12px; padding:15px; color:var(--pure-white); max-width:100%; width:100%; box-sizing:border-box;} .player-mock { text-align:center;} .player-header { font-size:0.8rem; margin-bottom:1rem; color:var(--primary-yellow); font-weight:600;} .player-header i { color:#1DB954; margin-right:0.625rem; font-size:1.25rem;} .song-title { font-size:1rem; font-weight:700; margin-bottom:0.25rem;} .artist { font-size:0.8rem; opacity:0.7; margin-bottom:1rem;} .player-controls { display:flex; justify-content:center; gap:1.5rem; font-size:1.1rem;} .player-controls i { cursor:pointer; transition:color 0.3s ease;} .player-controls i:hover { color:var(--primary-yellow);}  .menu-section { background:linear-gradient(135deg,var(--dark-black) 0%,#1a1a1a 100%); padding:100px 0; position:relative;} .menu-section::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--primary-yellow);} .menu-container { max-width:1400px; margin:0 auto; padding:0 40px;} .menu-header { text-align:center; margin-bottom:80px;} .menu-main-title { font-size:4rem; font-weight:900; color:var(--primary-yellow); letter-spacing:5px; text-transform:uppercase; margin-bottom:20px; text-shadow:3px 3px 0 rgba(255,215,0,0.3);} .menu-divider { width:200px; height:5px; background:linear-gradient(90deg,transparent,var(--primary-yellow),transparent); margin:0 auto;} .menu-category { margin-bottom:80px;} .category-title { font-size:2.5rem; font-weight:800; color:var(--pure-white); margin-bottom:40px; text-align:center; letter-spacing:3px; text-transform:uppercase; position:relative; padding-bottom:20px;} .category-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100px; height:3px; background:var(--primary-yellow);} .menu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:40px;} .menu-item { background:rgba(255,255,255,0.05); border:2px solid transparent; border-radius:10px; padding:25px; transition:all 0.3s ease; position:relative; overflow:hidden;} .menu-item::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,215,0,0.1),transparent); transition:left 0.5s ease;} .menu-item:hover { border-color:var(--primary-yellow); transform:translateY(-5px); background:rgba(255,215,0,0.1);} .menu-item:hover::before { left:100%;} .item-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px;} .item-header h3 { font-size:16px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--primary-yellow);} .item-price { font-size:20px; font-weight:800; color:var(--pure-white); background:var(--primary-yellow); padding:5px 15px; border-radius:20px; color:var(--dark-black);} .item-description { font-size:13px; color:rgba(255,255,255,0.7); line-height:1.5; font-style:italic;}  .footer { background:var(--dark-black); padding:60px 0 30px; position:relative;} .footer-container { max-width:1400px; margin:0 auto; padding:0 40px; text-align:center;} .footer-logo { margin-bottom:30px; display:flex; flex-direction:column; align-items:center; transition:all 0.3s ease; cursor:pointer;} .footer-logo:hover { transform:translateY(-3px);} .footer-logo-img { height:8.125rem; max-width:100%; width:auto; opacity:0.9; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); filter:drop-shadow(0 0.125rem 0.3125rem rgba(0,0,0,0.2));} .footer-logo:hover .footer-logo-img { transform:scale(1.1) rotate(5deg); filter:drop-shadow(0 5px 15px rgba(0,0,0,0.3));} .footer-pattern { font-size:0.875rem; letter-spacing:0.1875rem; color:var(--primary-yellow); margin-top:0.625rem; transition:all 0.3s ease;} .footer-logo:hover .footer-pattern { letter-spacing:6px; transform:scaleX(1.2);} .footer-social { margin-bottom:2.5rem; display:flex; justify-content:center; gap:1.25rem; align-items:center;} .footer-social-icon { color:var(--primary-yellow); font-size:1.875rem; transition:transform 0.3s ease; min-height:2.75rem; min-width:2.75rem; display:flex; align-items:center; justify-content:center; text-decoration:none; line-height:1;} .footer-social-icon:hover { transform:scale(1.2);} .footer-cta { margin-bottom:40px;} .reservation-btn { background:transparent; color:var(--primary-yellow); border:0.125rem solid var(--primary-yellow); padding:0.9375rem 2.5rem; font-size:0.875rem; font-weight:700; letter-spacing:0.0625rem; text-transform:uppercase; border-radius:3.125rem; cursor:pointer; transition:all 0.3s ease; min-height:2.75rem;} .reservation-btn:hover { background:var(--primary-yellow); color:var(--dark-black);} .footer-info { margin-bottom:40px;} .footer-address h4 { font-size:14px; font-weight:700; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; color:var(--primary-yellow);} .footer-address p { font-size:14px; margin-bottom:5px; color:var(--primary-yellow);} .footer-bottom { margin-top:40px;} .footer-line { width:100%; height:1px; background:var(--primary-yellow); margin:40px 0;} .footer-credits { margin-bottom:20px;} .footer-credits p { font-size:12px; color:var(--primary-yellow); margin-bottom:5px;} .footer-links { display:flex; justify-content:center; gap:30px; margin-bottom:20px;} .footer-links a,.footer-cookies a { color:var(--primary-yellow); font-size:12px; text-decoration:underline;} .footer-links a:hover,.footer-cookies a:hover { opacity:0.7;}  .carte-section { background:linear-gradient(135deg,var(--dark-black) 0%,#1a1a1a 100%); padding:0; position:relative;} .carte-decoration-img { position:absolute; top:1.25rem; left:1.25rem; width:12.5rem; max-width:15vw; height:auto; opacity:0.8; z-index:1; transition:all 0.3s ease;} .carte-decoration-img:hover { opacity:1; transform:scale(1.05);} .carte-decoration-img-right { position:absolute; top:1.25rem; right:1.25rem; width:12.5rem; max-width:15vw; height:auto; opacity:0.8; z-index:1; transition:all 0.3s ease;} .carte-decoration-img-right:hover { opacity:1; transform:scale(1.05);} .carte-section::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--primary-yellow);} .carte-container { max-width:1400px; margin:0 auto; padding:clamp(3rem,6vw,4rem) 40px;} .carte-title { font-family:'DrukWideBold',sans-serif; font-size:clamp(2.5rem,6vw,4rem); font-weight:900; color:var(--primary-yellow); text-align:center; letter-spacing:clamp(0.1875rem,0.5vw,0.3125rem); text-transform:uppercase; margin-bottom:1.25rem; text-shadow:0.1875rem 0.1875rem 0 rgba(255,215,0,0.3);} .carte-subtitle { text-align:center; color:rgba(255,255,255,0.7); font-size:clamp(1rem,2.5vw,1.2rem); margin-bottom:3.75rem; font-style:italic;} .carte-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(23.75rem,100%),1fr)); gap:clamp(1.25rem,3vw,1.875rem); margin-bottom:clamp(3rem,6vw,3.75rem);} .menu-card { background:rgba(255,255,255,0.05); border:2px solid transparent; border-radius:clamp(0.75rem,2vw,0.9375rem); padding:clamp(1.25rem,3vw,1.5625rem); transition:all 0.3s ease; position:relative; overflow:hidden; display:flex; gap:clamp(1rem,3vw,1.25rem); cursor:pointer; min-height:clamp(6rem,12vw,8.75rem);} .menu-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,215,0,0.1),transparent); transition:left 0.5s ease;} .menu-card:hover { border-color:var(--primary-yellow); transform:translateY(-5px); background:rgba(255,215,0,0.1); box-shadow:0 10px 30px rgba(255,215,0,0.2);} .menu-card:hover::before { left:100%;} .menu-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--primary-yellow); color:var(--dark-black); border-radius:0.625rem; padding:0.5rem; width:4rem; height:100%; flex-shrink:0;} .menu-emoji { font-size:clamp(1.5rem,3vw,2rem); line-height:1;} .menu-image { width:100%; height:100%; object-fit:contain; border-radius:0.625rem;} .menu-logo { width:100%; height:100%; object-fit:contain; border-radius:0.625rem;}  .desktop-only { display:block;} .mobile-only { display:none;} .specialty-image { width:clamp(1rem,2vw,1.25rem); height:clamp(1rem,2vw,1.25rem); object-fit:contain;} .menu-content { flex:1; display:flex; flex-direction:column; justify-content:space-between;} .menu-main-content { display:flex; flex-direction:column; gap:10px;} .menu-name { font-family:'DrukWideBold',sans-serif; font-size:clamp(1rem,2.5vw,1.2rem); font-weight:700; color:var(--primary-yellow); text-transform:uppercase; letter-spacing:0.0625rem; margin-bottom:0.3125rem; line-height:1.2; word-wrap:break-word;} .menu-description { color:rgba(255,255,255,0.8); font-size:clamp(0.8rem,1.5vw,0.9rem); line-height:1.5; margin-bottom:0.625rem;} .menu-speciality { display:flex; align-items:center; gap:8px; color:var(--primary-yellow); font-size:0.9rem; font-weight:600;} .menu-speciality i { font-size:0.8rem;} .menu-action { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-width:90px; flex-shrink:0;} .action-label { font-size:0.7rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px;} .action-arrow { font-size:1.5rem; font-weight:700; color:var(--primary-yellow); background:rgba(255,215,0,0.1); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,215,0,0.3); transition:all 0.3s ease;} .menu-card:hover .action-arrow { background:var(--primary-yellow); color:var(--dark-black); transform:translateX(5px);}   @media (min-width:48rem) and (max-width:64rem) { .carte-grid { grid-template-columns:repeat(2,1fr); gap:1.5rem; }  .menu-card { flex-direction:column; text-align:center; gap:1rem; min-height:clamp(7rem,15vw,10rem); }  .menu-icon { width:3.5rem; height:3.5rem; }}  @media (min-width:64rem) and (max-width:90rem) { .carte-grid { grid-template-columns:repeat(2,1fr); gap:2rem; }}  @media (min-width:90rem) { .carte-grid { grid-template-columns:repeat(3,1fr); gap:2.5rem; }}    .modal { display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.95); backdrop-filter:blur(10px); overflow:auto; -webkit-backdrop-filter:blur(10px); will-change:transform;} .modal-content { background:#0d0d0d; margin:2% auto; padding:2.5rem 3.125rem; border:0.0625rem solid rgba(255,215,0,0.3); border-radius:1.5625rem; width:85%; max-width:68.75rem; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 1.25rem 3.75rem rgba(0,0,0,0.9), 0 0 0 0.0625rem rgba(255,215,0,0.1) inset; -webkit-overflow-scrolling:touch; transform:translateZ(0);} .modal-content::-webkit-scrollbar { width:10px;} .modal-content::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:10px; margin:10px 0;} .modal-content::-webkit-scrollbar-thumb { background:rgba(255,215,0,0.4); border-radius:10px; border:2px solid transparent; background-clip:padding-box;} .modal-content::-webkit-scrollbar-thumb:hover { background:rgba(255,215,0,0.6); background-clip:padding-box;} .close { position:absolute; right:30px; top:30px; width:40px; height:40px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,215,0,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--primary-yellow); font-size:24px; font-weight:300; cursor:pointer; transition:all 0.3s ease;} .close:hover { transform:rotate(90deg); background:rgba(255,215,0,0.1); border-color:var(--primary-yellow);} .modal-title { font-family:'DrukWideBold',sans-serif; font-size:clamp(1.8rem,4vw,2.5rem); font-weight:700; color:var(--primary-yellow); text-align:center; margin-bottom:1.25rem; letter-spacing:clamp(0.125rem,0.3vw,0.125rem); text-transform:uppercase; text-shadow:0 0.125rem 0.625rem rgba(255,215,0,0.3);} .modal-subtitle { text-align:center; color:rgba(255,255,255,0.5); margin-bottom:40px; font-size:0.95rem; font-weight:300;} .modal .menu-section { margin-bottom:55px; padding:25px; background:rgba(255,255,255,0.02); border-radius:20px; border:1px solid rgba(255,215,0,0.1); overflow:hidden;} .modal .section-title { font-family:'DrukWideBold',sans-serif; font-size:clamp(1.2rem,3vw,1.6rem); font-weight:600; color:var(--primary-yellow); margin:-2.5rem -3.125rem 1.25rem -3.125rem; padding:1.6rem 3.125rem 1.2rem 3.125rem; border-bottom:0.0625rem solid rgba(255,215,0,0.2); background:rgba(255,215,0,0.03); text-transform:uppercase; letter-spacing:clamp(0.0625rem,0.2vw,0.09375rem); display:flex; align-items:center; justify-content:flex-start; text-align:left; box-sizing:border-box; line-height:1.3;} .modal .section-subtitle { color:rgba(255,255,255,0.5); font-size:0.85rem; margin-top:-10px; margin-bottom:20px; font-weight:300; font-style:italic;} .modal .menu-items { display:grid; grid-template-columns:1fr; gap:15px;} .modal .menu-item { background:rgba(0,0,0,0.3); padding:1.125rem 1.375rem; border-radius:0.75rem; border:0.0625rem solid rgba(255,215,0,0.08); display:flex; justify-content:space-between; align-items:center; transition:all 0.3s ease; position:relative; min-height:4rem; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} .modal .menu-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary-yellow); border-radius:3px 0 0 3px; opacity:0; transition:opacity 0.3s ease;} .modal .menu-item:hover { background:rgba(255,215,0,0.08); border-color:rgba(255,215,0,0.2); transform:translateX(5px);} .modal .menu-item:hover::before { opacity:1;} .modal .item-info { flex:1; padding-right:20px;} .modal .item-info h4 { font-size:clamp(0.9rem,2.5vw,1rem); font-weight:600; color:var(--pure-white); margin-bottom:0.375rem; text-transform:uppercase; letter-spacing:clamp(0.03125rem,0.1vw,0.03125rem); line-height:1.3;} .modal .item-info p { font-size:clamp(0.8rem,2vw,0.85rem); color:rgba(255,255,255,0.5); font-style:normal; line-height:1.5; margin-top:0.25rem;} .modal .price { font-size:clamp(1rem,2.5vw,1.1rem); font-weight:600; background:linear-gradient(135deg,var(--primary-yellow),#FFD700); padding:0.625rem 1.125rem; border-radius:1.5625rem; color:var(--dark-black); white-space:nowrap; box-shadow:0 0.1875rem 0.625rem rgba(255,215,0,0.2); min-width:5rem; text-align:center; flex-shrink:0;}  .nav-toggle { display:none; background:none; border:none; color:var(--pure-white); font-size:1.5rem; cursor:pointer; padding:0.5rem; transition:all 0.3s ease; min-height:2.75rem; min-width:2.75rem; align-items:center; justify-content:center;} .nav-toggle:hover { color:var(--primary-yellow);} .nav-toggle.active { color:var(--primary-yellow);}  .mobile-nav { display:none; position:fixed; top:0; left:-100%; width:100%; height:100vh; background:var(--dark-black); z-index:1001; transition:left 0.3s ease; flex-direction:column; padding:2rem; box-sizing:border-box;} .mobile-nav.active { left:0;} .mobile-nav-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; padding-bottom:1rem; border-bottom:0.125rem solid var(--primary-yellow);} .mobile-nav-logo { height:4rem; width:auto;} .mobile-nav-close { background:none; border:none; color:var(--pure-white); font-size:2rem; cursor:pointer; padding:0.5rem; min-height:2.75rem; min-width:2.75rem; display:flex; align-items:center; justify-content:center;} .mobile-nav-menu { list-style:none; padding:0; margin:0; flex:1;} .mobile-nav-menu li { margin-bottom:1.5rem;} .mobile-nav-menu .nav-link { font-size:1.2rem; padding:1rem 0; border-bottom:0.0625rem solid rgba(255,255,255,0.1); display:block; text-align:center;} .mobile-nav-social { display:flex; justify-content:center; gap:2rem; margin-top:auto; padding-top:2rem; border-top:0.125rem solid rgba(255,255,255,0.1);}      @media (max-width:64rem) { .navbar { grid-template-columns:auto 1fr auto; gap:1rem; }  .nav-left, .nav-right-menu { display:none; }  .nav-center-left, .nav-center-right { display:none; }  .nav-toggle { display:flex; justify-self:start; }  .logo-container { justify-self:center; }  .nav-right { justify-self:end; }  .mobile-nav { display:flex; }  .hero-section { margin-top:120px; }} @media (max-width:48rem) { .header { padding:0.75rem 0; }  .header-container { padding:0 1.25rem; }  .navbar { gap:0.75rem; }  .logo { height:3.5rem; }  .hero-section { margin-top:80px; min-height:100vh; }  .horaires-container { flex-direction:column; gap:2.5rem; padding:0 1.25rem; }  .jeux-grid { max-width:28.125rem; gap:1rem; }  .jeu-image { height:11.25rem; }  .jeu-image:nth-child(1) { height:10.625rem; }  .jeu-image:nth-child(2) { height:11.875rem; }  .jeu-image:nth-child(3) { height:11.25rem; }  .jeu-image:nth-child(4) { height:10.9375rem; }  .events-grid { grid-template-columns:1fr; gap:1.25rem; }  .event-card { flex-direction:column; text-align:center; gap:0.9375rem; }  .event-date { align-self:center; }  .events-social { flex-direction:column; align-items:center; gap:1rem; }  .collage-container { grid-template-columns:1fr; grid-template-rows:auto; padding:0 1.25rem; }   .item-1, .item-2, .item-3, .item-4, .item-5, .item-6 { display:block; grid-column:1; grid-row:auto; height:300px; }  .spotify-player { display:none; }  .carte-decoration-img { width:7.5rem; top:0.625rem; left:0.625rem; }  .carte-decoration-img-right { width:7.5rem; top:0.625rem; right:0.625rem; }  .carte-grid { grid-template-columns:1fr; gap:1rem; }  .menu-card { flex-direction:column; text-align:center; gap:0.75rem; padding:1rem; min-height:auto; }  .menu-icon { align-self:center; width:4rem; height:4rem; background:transparent; border:none; box-shadow:none; padding:0; }  .menu-content { width:100%; }  .menu-action { margin-top:0.5rem; }   .desktop-only { display:none; }  .mobile-only { display:block; }  .footer-links { flex-direction:column; gap:0.625rem; }} @media (max-width:30rem) { .header { padding:0.5rem 0; }  .header-container, .events-container, .carte-container, .collage-container, .footer-container, .horaires-container { padding:0 1rem; }  .logo { height:3rem; }  .hero-section { margin-top:65px; }  .jeux-grid { grid-template-columns:1fr; max-width:18.75rem; }  .jeu-image, .jeu-image:nth-child(1), .jeu-image:nth-child(2), .jeu-image:nth-child(3), .jeu-image:nth-child(4) { height:15rem; transform:none; }  .collage-container { grid-template-columns:1fr; }  .item-1, .item-2, .item-3, .item-4, .item-5, .item-6 { height:18.75rem; }  .carte-decoration-img, .carte-decoration-img-right { display:none; }} @media (max-width:25rem) { .header { padding:0.25rem 0; }  .navbar { grid-template-columns:1fr auto 1fr; }  .nav-toggle { font-size:1.25rem; }  .logo { height:2.5rem; }  .social-icon { font-size:1.25rem; min-height:2.5rem; min-width:2.5rem; }  .hero-section { margin-top:50px; }}  @media (min-width:48rem) and (max-width:90rem) { .collage-container { grid-template-columns:repeat(2,1fr); grid-template-rows:auto auto auto auto; }  .item-1 {grid-column:1;grid-row:1;} .item-2 {grid-column:2;grid-row:1;} .item-3 {grid-column:1;grid-row:2;} .item-4 {grid-column:2;grid-row:2;} .item-6 {grid-column:1;grid-row:3;}  .spotify-player { grid-column:2; grid-row:3; }  .item-5 { display:none; }} @media (min-width:90rem) {  .collage-container { grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; }} @media (min-width:120rem) { .header-container, .events-container, .carte-container, .collage-container, .footer-container { max-width:120rem; }  .horaires-container { max-width:100rem; }}  @supports (-webkit-appearance:none) { .modal-content { -webkit-overflow-scrolling:touch; transform:translateZ(0); will-change:scroll-position; }  .modal .menu-item { transform:translateZ(0); }  .modal-title, .modal .section-title { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }  .photo-modal-content { margin:clamp(1%,2vh,2%) auto; transform:translateZ(0); }  .photo-modal { overflow:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }}   .collage-container { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; }  .item-1 {grid-column:1;grid-row:1;} .item-2 {grid-column:2;grid-row:1;} .item-3 {grid-column:3;grid-row:1;} .item-4 {grid-column:1;grid-row:2;} .spotify-player {grid-column:2;grid-row:2;} .item-6 {grid-column:3;grid-row:2;}  .item-5 {display:none;}}  @media (max-width:48rem) { .modal-content { width:95%; margin:5% auto; padding:1.5rem 1.25rem; border-radius:1rem; max-height:85vh; }  .modal-title { margin-bottom:1rem; }  .modal .section-title { margin:-1.5rem -1.25rem 1rem -1.25rem; padding:1rem 1.25rem 0.75rem 1.25rem; font-size:1.1rem; text-align:center; width:calc(100% + 2.5rem); box-sizing:border-box; }  .modal .menu-items { gap:0.75rem; }  .modal .menu-item { padding:1rem; flex-direction:column; align-items:flex-start; gap:0.75rem; min-height:auto; }  .modal .item-info { width:100%; padding-right:0; text-align:left; }  .modal .item-info h4 { font-size:1rem; margin-bottom:0.5rem; }  .modal .item-info p { font-size:0.875rem; line-height:1.4; }  .modal .price { font-size:0.9rem; padding:0.5rem 1rem; text-align:center; border-radius:1.5rem; margin-top:0.5rem; display:inline-block; }  .close { right:1rem; top:1rem; width:2.5rem; height:2.5rem; font-size:1.25rem; }} @media (max-width:30rem) { .modal-content { width:98%; margin:2% auto; padding:1rem 0.875rem; max-height:90vh; }  .modal-title { font-size:1.5rem; letter-spacing:0.0625rem; margin-bottom:0.75rem; }  .modal .section-title { margin:-1rem -0.875rem 0.75rem -0.875rem; padding:0.875rem 1rem 0.625rem 1rem; font-size:1rem; width:calc(100% + 1.75rem); box-sizing:border-box; }  .modal .menu-item { padding:0.875rem; border-radius:0.5rem; flex-direction:column; align-items:flex-start; }  .modal .item-info { width:100%; margin-bottom:0.5rem; }  .modal .item-info h4 { font-size:0.95rem; }  .modal .item-info p { font-size:0.8rem; }  .modal .price { font-size:0.875rem; padding:0.5rem 0.75rem; text-align:center; border-radius:1.25rem; margin:0; align-self:flex-start; white-space:normal; min-width:auto; }}    .photos-hero { background:linear-gradient(135deg,var(--dark-black) 0%,#1a1a1a 100%); background-image:url('../images/herophotos.svg'); background-size:cover; background-position:center; background-repeat:no-repeat; padding:clamp(2.5rem,5vw,5rem) 0 clamp(3.75rem,6vw,5rem); position:relative; overflow:hidden; margin-top:clamp(5rem,8vw,8rem);} .photos-hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:1;} .photos-hero-container { max-width:87.5rem; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); text-align:center; position:relative; z-index:2;} .photos-hero-decoration { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:200px; height:auto; opacity:0.4; z-index:1;} .photos-hero-title { font-family:'DrukWideBold',sans-serif; font-size:clamp(2.5rem,6vw,4rem); font-weight:900; color:var(--primary-yellow); text-align:center; letter-spacing:clamp(2px,1vw,5px); text-transform:uppercase; margin-bottom:1.25rem; text-shadow:3px 3px 0 rgba(255,215,0,0.3);} .photos-hero-subtitle { font-size:clamp(1rem,2vw,1.2rem); color:var(--light-gray); margin:0 auto 1.875rem auto; max-width:37.5rem; line-height:1.6;} .photos-hero-pattern { font-size:16px; letter-spacing:4px; color:var(--primary-yellow); opacity:0.8;}  .photos-gallery-section { background-image:url('../images/joyzebre.svg'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; padding:80px 0; position:relative;} .photos-gallery-section::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.6); z-index:1;} .photos-container { max-width:87.5rem; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); position:relative; z-index:2;} .photos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.25rem,3vw,1.875rem); margin-bottom:clamp(3.75rem,6vw,3.75rem);} .photo-item { position:relative; border-radius:clamp(0.625rem,2vw,0.9375rem); overflow:hidden; cursor:pointer; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); box-shadow:0 0.625rem 1.875rem rgba(0,0,0,0.1); aspect-ratio:4/3;} .photo-item:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 20px 50px rgba(0,0,0,0.2);} .photo-img { width:100%; height:100%; object-fit:cover; transition:all 0.4s ease;} .photo-item:hover .photo-img { transform:scale(1.1); filter:brightness(0.8);} .photo-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,0.8)); color:white; padding:40px 20px 20px; transform:translateY(100%); transition:all 0.4s ease;} .photo-item:hover .photo-overlay { transform:translateY(0);} .photo-info h3 { font-size:1.3rem; font-weight:700; margin:0 0 8px 0; color:var(--primary-yellow);} .photo-info p { font-size:0.95rem; margin:0; opacity:0.9;}  .photos-filter { display:flex; justify-content:center; flex-wrap:wrap; gap:15px; margin-bottom:60px;} .filter-btn { background:transparent; color:var(--dark-black); border:2px solid var(--dark-black); padding:12px 25px; font-size:0.9rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border-radius:25px; transition:all 0.3s ease;} .filter-btn:hover,.filter-btn.active { background:var(--primary-yellow); color:var(--dark-black); border-color:var(--primary-yellow); transform:translateY(-2px); box-shadow:0 5px 15px rgba(253,255,0,0.3);}  .photos-cta { text-align:center; background:var(--dark-black); padding:clamp(2.5rem,5vw,3.75rem) clamp(1.25rem,4vw,2.5rem); border-radius:clamp(0.9375rem,3vw,1.25rem); color:white;} .photos-cta h3 { font-family:'DrukWideBold',sans-serif; font-size:clamp(1.5rem,4vw,2.2rem); font-weight:900; color:var(--primary-yellow); text-align:center; letter-spacing:clamp(2px,1vw,5px); text-transform:uppercase; margin:0 0 0.9375rem 0; text-shadow:3px 3px 0 rgba(255,215,0,0.3);} .photos-cta p { font-size:clamp(1rem,2vw,1.1rem); margin:0 0 2.5rem 0; color:var(--light-gray); line-height:1.6;} .photos-social { display:flex; justify-content:center; gap:clamp(0.9375rem,3vw,1.25rem); flex-wrap:wrap;} .photos-social-btn { display:inline-flex; align-items:center; gap:0.75rem; background:var(--primary-yellow); color:var(--dark-black); padding:clamp(0.75rem,2vw,0.9375rem) clamp(1.25rem,3vw,1.875rem); border-radius:3.125rem; font-weight:600; text-decoration:none; transition:all 0.3s ease; font-size:clamp(0.875rem,2vw,1rem); min-height:2.75rem;} .photos-social-btn:hover { background:white; transform:translateY(-3px); box-shadow:0 10px 25px rgba(253,255,0,0.3);} .photos-social-btn i { font-size:1.2rem;}  .photo-modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.95); animation:modalFadeIn 0.3s ease;} @keyframes modalFadeIn { from {opacity:0;} to {opacity:1;}} .photo-modal-content { position:relative; margin:clamp(2%,5vh,5%) auto; max-width:min(90%,75rem); max-height:min(90%,50rem); text-align:center; display:flex; flex-direction:column;} .modal-image { max-width:100%; max-height:min(80vh,40rem); object-fit:contain; border-radius:clamp(0.5rem,2vw,0.625rem); box-shadow:0 1.25rem 3.125rem rgba(0,0,0,0.5); flex-shrink:0;} .photo-modal-close { position:absolute; top:clamp(-3.125rem,-8vw,-3.125rem); right:0; color:white; font-size:clamp(1.75rem,4vw,2.1875rem); cursor:pointer; transition:all 0.3s ease; width:clamp(2.5rem,6vw,2.5rem); height:clamp(2.5rem,6vw,2.5rem); display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,0,0,0.5);} .photo-modal-close:hover { color:var(--primary-yellow); transform:scale(1.2);} .photo-modal-info { background:rgba(0,0,0,0.8); color:white; padding:20px; margin-top:20px; border-radius:10px; backdrop-filter:blur(10px);} .photo-modal-info h3 { color:var(--primary-yellow); margin:0 0 10px 0; font-size:1.5rem;} .photo-modal-info p { margin:0; opacity:0.9;} .photo-modal-viewer { display:flex; align-items:center; justify-content:center; max-width:100%; position:relative;} .photo-nav-btn { background:rgba(253,255,0,0.9); color:var(--dark-black); border:none; padding:0; font-size:clamp(1.25rem,3vw,2rem); cursor:pointer; border-radius:50%; transition:all 0.3s ease; flex-shrink:0; width:clamp(3.75rem,8vw,4.375rem); height:clamp(3.75rem,8vw,4.375rem); display:flex; align-items:center; justify-content:center; box-shadow:0 0.25rem 0.9375rem rgba(0,0,0,0.3); position:absolute; top:50%; transform:translateY(-50%); z-index:10001;} .photo-nav-left { left:clamp(-3.75rem,-10vw,-5rem);} .modal-image { max-width:100%; max-height:80vh; object-fit:contain;} .photo-nav-right { right:clamp(-3.75rem,-10vw,-5rem);}     @media (max-width:20rem) { .photos-grid { grid-template-columns:1fr; gap:1rem; }  .photo-item { aspect-ratio:4/3; }  .photos-hero-decoration { display:none; }  .photo-modal-content { margin:5% auto; max-width:98%; max-height:90vh; }  .photo-nav-btn { width:3rem; height:3rem; font-size:1.25rem; }}  @media (max-width:48rem) { .photos-hero { background-attachment:scroll; margin-top:clamp(3rem,5vw,4rem); }  .photos-gallery-section { background-attachment:scroll; }  .photos-grid { grid-template-columns:1fr; gap:1.25rem; }  .photo-item { aspect-ratio:4/3; }  .photo-item:hover { transform:none; }  .photos-social { flex-direction:column; align-items:center; gap:1rem; }  .photos-social-btn { width:100%; max-width:18.75rem; justify-content:center; }  .photo-modal-content { margin:5% auto; max-width:95%; max-height:85vh; }  .photo-modal-close { top:-2.5rem; font-size:1.75rem; }  .photo-modal-viewer { flex-direction:column; gap:1.25rem; }  .photo-nav-btn { width:3.75rem; height:3.75rem; font-size:1.5rem; position:static; }  .photo-nav-left, .photo-nav-right { order:0; }  .modal-image { order:1; max-height:50vh; }  .photo-modal-info { margin-top:1rem; padding:1rem; }}  @media (min-width:48rem) and (max-width:64rem) { .photos-grid { grid-template-columns:repeat(2,1fr); gap:1.5rem; }  .photo-item { aspect-ratio:4/3; }  .photo-nav-btn { width:4rem; height:4rem; font-size:1.5rem; }  .photo-modal-content { max-width:85%; max-height:90vh; }}  @media (min-width:64rem) and (max-width:90rem) { .photos-grid { grid-template-columns:repeat(3,1fr); gap:1.875rem; }  .photo-item { aspect-ratio:4/3; }}  @media (min-width:90rem) { .photos-grid { grid-template-columns:repeat(4,1fr); gap:2rem; }  .photo-item { aspect-ratio:4/3; }  .photos-container { max-width:120rem; }  .photos-hero-container { max-width:120rem; }}  @media (min-width:120rem) { .photos-grid { grid-template-columns:repeat(5,1fr); gap:2.5rem; }}  @media (hover:none) { .photo-item:hover { transform:none; box-shadow:0 0.625rem 1.875rem rgba(0,0,0,0.1); }  .photo-item:hover .photo-img { transform:none; filter:none; }  .photo-item:hover .photo-overlay { transform:translateY(100%); }}  .home-photos-section { padding:0; position:relative;} .home-photos-container { max-width:87.5rem; margin:0 auto; padding:clamp(2rem,4vw,3rem) clamp(1.25rem,4vw,2.5rem);} .home-photos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(1.5rem,4vw,2rem); margin-bottom:clamp(2.5rem,5vw,3rem);} .home-photo-item { position:relative; border-radius:15px; overflow:hidden; cursor:pointer; transition:all 0.3s ease; aspect-ratio:4/3; border:3px solid var(--primary-yellow); box-shadow:0 15px 40px rgba(253,255,0,0.3);} .home-photo-item:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 20px 50px rgba(253,255,0,0.5);} .home-photo-img { width:100%; height:100%; object-fit:cover; transition:all 0.4s ease;} .home-photo-item:hover .home-photo-img { transform:scale(1.1); filter:brightness(1.1);} .home-spotify-player { background:var(--dark-black); border-radius:15px; padding:clamp(1rem,3vw,1.5rem); color:var(--pure-white); border:3px solid var(--primary-yellow); box-shadow:0 15px 40px rgba(253,255,0,0.3); display:flex; align-items:center; justify-content:center; aspect-ratio:8/3; grid-column:span 2;}  @media (max-width:48rem) { .home-photos-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }  .home-spotify-player { display:none; }  .home-photo-item:hover { transform:none; }  .home-photo-item:hover .home-photo-img { transform:none; filter:none; }} @media (max-width:30rem) { .home-photos-grid { grid-template-columns:1fr; }  .home-spotify-player { grid-column:span 1; aspect-ratio:4/3; }}