* {margin: 0;padding: 0;box-sizing: border-box;}html, body {overflow-x: hidden;width: 100%;}* {margin: 0;padding: 0;box-sizing: border-box;}html {scroll-behavior: smooth;}body {font-family: 'Lato', sans-serif;background: #fafafa;color: #121212;line-height: 1.6;}header {position: fixed;top: 0;width: 100%;background: white;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);display: flex;justify-content: space-between;align-items: center;padding: 12px 5%;z-index: 1000;}.logo img {height: 40px;}nav ul {display: flex;gap: 20px;list-style: none;}nav a {text-decoration: none;color: #121212;font-weight: 500;position: relative;padding: 6px 0;}nav a.active, nav a:hover {color: #b1985f;}.burger {display: none;flex-direction: column;gap: 5px;cursor: pointer;}.burger span {width: 25px;height: 3px;background-color: #121212;border-radius: 2px;}.catalogue {display: flex;flex-wrap: wrap;gap: 40px;padding: 100px 5% 60px;}.sidebar {flex: 1 1 200px;min-width: 180px;background: #f3f3f3;padding: 20px;border-radius: 12px;height: fit-content;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);position: sticky;top: 90px;}.sidebar h3 {font-family: 'Playfair Display', serif;margin-bottom: 10px;font-size: 1.2em;}.sidebar ul {list-style: none;padding-left: 0;margin-bottom: 20px;}.sidebar li a {text-decoration: none;color: #121212;display: block;padding: 8px 0;transition: color 0.2s;}.sidebar li a:hover, .sidebar li a.active {color: #b1985f;font-weight: bold;}.products {flex: 3 1 600px;display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 30px;}.products .item {background: #fff;padding: 20px;border-radius: 12px;text-align: center;box-shadow: 0 4px 8px rgba(0,0,0,0.05);transition: transform 0.2s, box-shadow 0.2s;}.products .item:hover {transform: translateY(-5px);box-shadow: 0 6px 12px rgba(0,0,0,0.08);}.products .item img {width: 100%;border-radius: 10px;margin-bottom: 12px;aspect-ratio: 1/1;object-fit: cover;}.products .item p {font-size: 0.95em;color: #333;}@media screen and (max-width: 768px) {.catalogue {flex-direction: column;padding-top: 90px;}.sidebar {width: 100%;position: relative;top: auto;}.products {grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}nav {position: absolute;top: 60px;right: 5%;background: white;border: 1px solid #ccc;border-radius: 12px;padding: 20px;display: none;flex-direction: column;box-shadow: 0 5px 15px rgba(0,0,0,0.1);}nav.show {display: flex;}.burger {display: flex;}nav ul {flex-direction: column;gap: 12px;}}@media screen and (max-width: 480px) {.products {grid-template-columns: 1fr;}}header {position: fixed;top: 0;width: 100%;background: white;padding: 10px 5%;display: flex;justify-content: space-between;align-items: center;z-index: 1000;box-shadow: 0 2px 8px rgba(0,0,0,0.05);}.logo img {height: 40px;}nav ul {display: flex;list-style: none;gap: 20px;}nav a {text-decoration: none;color: #121212;font-weight: 500;}nav a:hover, nav a.active {color: #b1985f;}.burger {display: none;}.menu-button {position: fixed;top: 70px;left: 20px;background: #121212;color: white;padding: 10px 14px;border: none;border-radius: 6px;font-size: 14px;cursor: pointer;z-index: 999;}.sidebar {position: fixed;top: 120px;left: 20px;background: white;border-radius: 12px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);padding: 20px;width: 200px;z-index: 998;transition: all 0.3s ease;}.sidebar.hidden {display: none;}.sidebar h3 {margin-bottom: 10px;font-family: 'Playfair Display', serif;}.sidebar ul {list-style: none;padding-left: 0;}.sidebar a {display: block;color: #121212;text-decoration: none;margin-bottom: 10px;}.sidebar a.active {font-weight: bold;color: #b1985f;}main.grid {margin-top: 140px;padding: 20px 5%;display: grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));gap: 20px;}.monture img {width: 100%;border-radius: 8px;cursor: pointer;transition: transform 0.2s;}.monture img:hover {transform: scale(1.05);}.popup {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);display: flex;align-items: center;justify-content: center;z-index: 9999;}.popup.hidden {display: none;}.popup-content {background: white;padding: 30px;border-radius: 12px;max-width: 600px;width: 90%;position: relative;text-align: center;}.popup-gallery img {width: 100%;margin-bottom: 10px;border-radius: 8px;}.close {position: absolute;top: 12px;right: 20px;font-size: 26px;cursor: pointer;font-weight: bold;color: #121212;}nav {display: flex;}.burger {display: none;flex-direction: column;gap: 5px;cursor: pointer;}.burger span {width: 25px;height: 3px;background: #121212;border-radius: 2px;}@media screen and (max-width: 768px) {nav {position: absolute;top: 60px;right: 5%;background: white;flex-direction: column;padding: 20px;display: none;box-shadow: 0 4px 10px rgba(0,0,0,0.1);}nav.show {display: flex;}.burger {display: flex;}nav ul {flex-direction: column;gap: 12px;}}.popup {position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.6);width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 10000;}.popup.hidden {display: none;}.popup-content {background: white;padding: 20px;max-width: 800px;width: 95%;border-radius: 12px;position: relative;text-align: center;}.close {position: absolute;top: 10px;right: 20px;font-size: 26px;cursor: pointer;font-weight: bold;}.carousel {display: flex;align-items: center;justify-content: space-between;gap: 10px;}.carousel-images {display: flex;justify-content: center;align-items: center;overflow: hidden;width: 100%;height: auto;}.carousel-images img {max-height: 400px;width: auto;max-width: 100%;border-radius: 8px;flex-shrink: 0;display: none;}.carousel button {background: none;border: none;font-size: 30px;cursor: pointer;}.popup-desc {margin-top: 15px;font-size: 1em;color: #333;}.galerie-montures {display: grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));gap: 20px;position: relative;}.monture {width: 100%;height: auto;position: relative;display: block;}.monture::after {content: "";position: absolute;bottom: 6px;right: 6px;background-image: url('logo o opticien ok_page-0001.jpg');background-size: 40px;background-repeat: no-repeat;background-position: bottom right;width: 40px;height: 40px;opacity: 0.85;pointer-events: none;z-index: 2;}.monture::before {content: "";position: absolute;inset: 0;background-image: url('images/logo-oopticien.png');background-repeat: repeat;background-size: 100px;opacity: 0.025;pointer-events: none;z-index: 1;}.popup-img::before, .popup-img::after {display: none !important;content: none !important;}footer {background-color: #111;color: #f0f0f0;padding: 2rem 1rem 1rem;font-family: 'Lato', sans-serif;}.footer-container {display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 1200px;margin: auto;}.footer-col {flex: 1 1 250px;margin: 1rem;}.footer-col h3, .footer-col h4 {margin-bottom: 1rem;color: #fff;}.footer-col ul {list-style: none;padding: 0;}.footer-col ul li {margin-bottom: 0.5rem;}.footer-col ul li a {color: #ccc;text-decoration: none;transition: color 0.3s;}.footer-col ul li a:hover {color: #fff;}.footer-bottom {text-align: center;border-top: 1px solid #333;margin-top: 2rem;padding-top: 1rem;font-size: 0.9rem;color: #aaa;}.footer-bottom {text-align: center;border-top: 1px solid #333;margin-top: 2rem;padding-top: 1rem;font-size: 0.9rem;color: #aaa;}.footer-links-legaux a {color: #ccc;font-size: 0.9rem;margin: 0 8px;text-decoration: none;transition: color 0.3s ease;}.footer-links-legaux a:hover {color: #fff;}.dev-link {color: #b1985f;text-decoration: none;font-weight: bold;transition: color 0.3s, text-decoration 0.3s;}.dev-link:hover {color: #ffffff;text-decoration: underline;}.external-link-icon {font-size: 0.75em;margin-left: 4px;vertical-align: top;}