/* Responsive Styles */ /* Large devices (desktops, less than 1200px) */ @media (max-width: 1199.98px) { .container { max-width: 960px; } .hero-content h1 { font-size: 3.5rem; } .about-content { gap: 30px; } .specialites-grid, .partenaires-grid, .testimonials-slider { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } /* Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) { .container { max-width: 720px; } h1 { font-size: 3rem; } h2 { font-size: 2.2rem; } .hero-content h1 { font-size: 3rem; } .about-content { flex-direction: column; } .about-image, .about-text { width: 100%; } .newsletter-content, .contact-content { flex-direction: column; gap: 30px; } .footer-content { flex-direction: column; gap: 30px; } .footer-logo { margin-bottom: 20px; } .footer-links { width: 100%; justify-content: space-between; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .container { max-width: 540px; } #header .container { height: 70px; } .mobile-menu-btn { display: flex; z-index: 1001; } .nav-links { position: fixed; top: 0; right: -100%; width: 80%; height: 100vh; background-color: white; flex-direction: column; justify-content: center; align-items: center; padding: 50px; box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1); transition: right 0.4s ease; z-index: 1000; } .nav-links.active { right: 0; } .nav-links li { margin: 15px 0; } .hero-content h1 { font-size: 2.5rem; } .hero-content p { font-size: 1.1rem; } .section { padding: 60px 0; } .section-header { margin-bottom: 30px; } .specialites-grid, .partenaires-grid, .testimonials-slider { grid-template-columns: 1fr; gap: 20px; } .galerie-grid { grid-template-columns: repeat(2, 1fr); } .newsletter-form .form-group { flex-direction: column; } .newsletter-form input { border-radius: var(--border-radius); margin-bottom: 10px; } .newsletter-form .btn { border-radius: var(--border-radius); width: 100%; } .footer-links { flex-direction: column; gap: 20px; } .back-to-top { width: 40px; height: 40px; bottom: 20px; right: 20px; font-size: 1rem; } } /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .container { padding: 0 15px; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } .hero-content h1 { font-size: 2.2rem; } .hero-content p { font-size: 1rem; } .section { padding: 50px 0; } .nav-links { width: 100%; } .galerie-grid { grid-template-columns: 1fr; } .testimonial-item { padding: 20px; } .contact-item .icon { font-size: 1.2rem; } } /* Very small devices (small portrait phones, less than 400px) */ @media (max-width: 399.98px) { .hero-content h1 { font-size: 1.8rem; } .section-header h2 { font-size: 1.8rem; } .btn, .btn-outline { padding: 10px 18px; font-size: 13px; } .contact-content, .about-content { gap: 20px; } .specialite-card, .partenaire-card { overflow: hidden; } .testimonial-author img { width: 50px; height: 50px; } } /* For devices with hover capability */ @media (hover: hover) { .nav-links a:hover::after { width: 100%; } .btn:hover, .btn-outline:hover { transform: translateY(-3px); } .social-link:hover { transform: translateY(-3px); } .specialite-card:hover, .partenaire-card:hover, .testimonial-item:hover { transform: translateY(-10px); } .galerie-item:hover .galerie-overlay { opacity: 1; } .footer-links-column ul li a:hover { padding-left: 5px; } } /* For print media */ @media print { #header, #footer, .back-to-top, .btn, .btn-outline, #newsletter, #contact { display: none; } body { background-color: white; color: black; font-size: 12pt; } .container { width: 100%; max-width: 100%; padding: 0; } img { max-width: 500px; } a { text-decoration: underline; color: black; } .section { padding: 20px 0; page-break-inside: avoid; } }