responsive-fix.css /* ===================================================== RESPONSIVE FIX GLOBAL - KOSEN À charger EN DERNIER dans le ===================================================== */ /* ---------- BASE GLOBALE ---------- */ * { box-sizing: border-box; } html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; overflow-x: hidden; } body { background-image: url('../imgs_general/KOSEN_ASSETSD_bg_1.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; } img { max-width: 100%; height: auto; } /* ---------- CONTAINER PRINCIPAL ---------- */ #contain { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; position: relative; } /* ---------- HEADER ---------- */ header { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 25px 0; } header h1, h1 { float: none; width: auto; margin: 0; } header h1 a { display: block; } header h1 img, h1 img, header h1 a img { width: 180px; max-width: 100%; height: auto; display: block; position: static; } /* ---------- MENU PRINCIPAL ---------- */ nav.main-menu { float: none; width: auto; flex: 1; min-width: 320px; padding-top: 0; text-align: right; border-bottom: solid 2px #ffffff; } nav.main-menu a { display: inline-block; padding: 10px 8px; font-size: 1rem; line-height: 1.2; } /* ---------- MENU SOCIAL HEADER ---------- */ nav.links-menu { width: 100%; padding: 10px 0; text-align: right; clear: both; } nav.links-menu a { display: inline-block; width: 32px; margin: 0 8px; } nav.links-menu a img { width: 100%; height: auto; } /* ---------- SECTIONS ---------- */ section { width: 100%; padding: 40px 0; } h2.titre { width: fit-content; min-width: 200px; height: auto; min-height: 35px; padding: 8px 16px; margin: 0 auto 30px auto; text-align: center; line-height: 1.2; } /* ---------- NEWS HOME ---------- */ section#news { margin-top: 40px; margin-left: 0; } section#news li.black { display: flex; flex-wrap: wrap; background: #000; } .img_news { float: none; width: 40%; } .text_news { float: none; width: 60%; padding: 30px; } .text_news p { width: 100%; } .bt_news { width: fit-content; min-width: 220px; margin-left: auto; } /* ---------- SLIDERS RELEASES / ARTISTS HOME ---------- */ .slide_release { display: flex; flex-wrap: nowrap; gap: 24px; width: 100%; } .slide_release a { float: none; flex: 1 1 0; width: auto; height: auto; min-width: 0; padding: 0; margin: 0; overflow: hidden; } .slide_release a img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; } /* Correction de ton ancienne règle .quart */ .quart div a { display: block; width: 100%; height: auto; padding: 0; margin: 0; } /* ---------- PAGE RELEASES ---------- */ nav.trirelease { float: left; width: 22%; } div.releases { float: right; width: 78%; } div.releases ul { float: left; width: 25%; min-height: 360px; max-height: none; height: auto; padding: 12px; margin: 0; } .releases ul li img.shadow { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* ---------- PAGE ARTISTS ---------- */ nav.triartists { float: left; width: 22%; } .artists, #artistslist { float: right; width: 78%; } #menu_artists a, .artist_thumb { float: left; width: 23%; margin: 1%; } #menu_artists a img, .artist_thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .artist_visual { float: left; width: 40%; } .artist_text { float: left; width: 60%; } .artist_releases a { float: left; width: 16.66%; padding: 1%; } /* ---------- SHOP HOME ---------- */ .contain-shop { min-width: 0; width: 100%; min-height: 330px; background-size: cover; background-position: center; } section#shop p { width: min(420px, 90%); margin-left: 2%; } .shop-products { display: flex; gap: 24px; justify-content: center; align-items: stretch; flex-wrap: wrap; } .shop-products a { display: block; flex: 1 1 260px; max-width: 360px; } .shop-products img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* ---------- FOOTER FULL WIDTH ---------- */ /* Ton footer est dans #contain. Cette règle le force à sortir visuellement du container pour que le fond noir prenne toute la largeur de l'écran. */ footer#contact { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #000; color: #fff; padding: 50px max(24px, calc((100vw - 1400px) / 2 + 24px)) 25px; display: grid; grid-template-columns: 1.2fr 1fr 0.85fr; grid-template-areas: "stay about contact" "follow follow follow" "legend legend legend"; gap: 45px 60px; clear: both; } footer#contact .container { grid-area: stay; } footer#contact .container2 { grid-area: about; } footer#contact .footer-contact { grid-area: contact; } footer#contact .container3 { grid-area: follow; } footer#contact .legend { grid-area: legend; } footer#contact .container, footer#contact .container2, footer#contact .container3, footer#contact .footer-contact { width: 100%; max-width: none; margin: 0; padding: 0; } footer#contact p { color: #fff; line-height: 1.5; } footer#contact ul { margin: 0; padding: 0; } footer#contact .links-menu-footer br { display: none; } footer#contact .footer-social-row, footer#contact nav.links-menu-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; } footer#contact nav.links-menu-footer a { display: inline-flex; align-items: center; gap: 10px; width: auto; margin: 0; color: #fff; text-decoration: none; } footer#contact nav.links-menu-footer img { width: 24px; height: auto; margin: 0; } footer#contact .legend { width: 100%; margin: 0; padding-top: 20px; text-align: center; border-top: 1px solid rgba(255,255,255,0.25); } /* ===================================================== TABLETTES ===================================================== */ @media screen and (max-width: 1024px) { #contain { max-width: 100%; padding: 0 20px; } header { justify-content: center; text-align: center; } nav.main-menu { width: 100%; flex: none; min-width: 0; text-align: center; } nav.links-menu { text-align: center; } div.releases ul { width: 33.33%; min-height: 360px; } nav.trirelease, nav.triartists { display: none; } div.releases, .artists, #artistslist { width: 100%; float: none; } #menu_artists a, .artist_thumb { width: 31.33%; } .artist_visual { width: 45%; } .artist_text { width: 55%; } footer#contact { grid-template-columns: 1fr 1fr; grid-template-areas: "stay about" "contact contact" "follow follow" "legend legend"; gap: 40px; } } /* ===================================================== MOBILES ===================================================== */ @media screen and (max-width: 768px) { body { background-attachment: scroll; } #contain { width: 100%; padding: 0 16px; } header { display: block; padding: 20px 0; text-align: center; } header h1 img, h1 img, header h1 a img { width: 150px; margin: 0 auto 20px auto; } nav.main-menu { display: flex; flex-direction: column; width: 100%; border-bottom: none; margin-bottom: 20px; text-align: center; } nav.main-menu a { display: block; width: 100%; padding: 12px 10px; background: #000; border-bottom: 1px solid rgba(255,255,255,0.2); } nav.links-menu { display: none; } section { padding: 30px 0; } h2.titre { display: block; min-width: 0; max-width: 100%; font-size: 18px; } section#news li.black { display: block; } .img_news, .text_news { width: 100%; } .text_news { padding: 22px; } .bt_news { width: 100%; min-width: 0; } .slide_release { flex-wrap: wrap; gap: 18px; } .slide_release a { flex: 1 1 calc(50% - 18px); } /* Sur la home, tes sections mobiles existent déjà. Ici on garde ton fonctionnement : catégories simplifiées sur mobile. */ section#releases, section#artists, section#shop { display: none; } section#releases-mobile, section#artists-mobile, section#shop-mobile, section#podcast-mobile { display: block; width: 100%; float: none; position: relative; } #releases-mobile img, #artists-mobile img, #shop-mobile img, #podcast-mobile img { width: 100%; height: auto; display: block; } h2.mobile { left: 50%; top: 50%; width: auto; min-width: 180px; transform: translate(-50%, -50%); font-size: 1.4rem; } div.releases ul { width: 50%; min-height: 0; padding: 10px; } #menu_artists a, .artist_thumb { width: 48%; margin: 1%; } .artist_visual, .artist_text { float: none; width: 100%; } .artistbloc h3 { text-align: center; margin: 20px 0; } .bloc_bio p { padding: 0; } .artist_releases a { width: 33.33%; } section#shop p { width: 100%; margin: 0; } footer#contact { grid-template-columns: 1fr; grid-template-areas: "stay" "about" "contact" "follow" "legend"; padding: 40px 20px 25px; gap: 32px; text-align: center; } footer#contact .justify { text-align: center; } footer#contact .footer-social-row, footer#contact nav.links-menu-footer { justify-content: center; } footer#contact nav.links-menu-footer .title_nav_footer { width: 100%; margin: 0 0 10px 0; } } /* ===================================================== TRÈS PETITS MOBILES ===================================================== */ @media screen and (max-width: 480px) { header h1 img, h1 img, header h1 a img { width: 130px; } div.releases ul { width: 100%; } #menu_artists a, .artist_thumb { width: 100%; margin: 0 0 20px 0; } .artist_releases a { width: 50%; } .slide_release a { flex: 1 1 100%; } h2.mobile { font-size: 1.2rem; min-width: 150px; } footer#contact { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #000; color: #fff; clear: both; box-sizing: border-box; /* Désactive les anciennes sections mobiles */ section#releases-mobile, section#artists-mobile, section#shop-mobile, section#podcast-mobile { display: none !important; } /* Garde les sections normales visibles aussi sur mobile */ section#releases, section#artists, section#shop { display: block !important; }/* ===================================================== DESACTIVATION DES ANCIENNES SECTIONS MOBILES ===================================================== */ #releases-mobile, #artists-mobile, #shop-mobile, #podcast-mobile, section#releases-mobile, section#artists-mobile, section#shop-mobile, section#podcast-mobile { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } /* On force les vraies sections ordinateur à rester visibles */ #releases, #artists, #shop, section#releases, section#artists, section#shop { display: block !important; visibility: visible !important; height: auto !important; } body { outline: 10px solid red !important; }